@import "variables";

table.admin-table {
  width: 100%;
  margin-top: 10px;
}

.actions {
  width: 102px;
  .al-icon {
    color: $blue-300;

    &:hover {
      color: $blue-200;
    }
  }
}

.action-button {
  color: $blue-200;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s, visibility 0.2s;

  &:hover {
    color: #ffffff;
    transition: color 0.2s;
  }
}

thead {
  border-bottom: solid 1px $blue-600;

  th {
    font-size: 12px;
    font-weight: 500;
    color: $blue-300;
    text-transform: uppercase;
    padding: 4px 8px;

    &:nth-child(1) {
      width: 300px;
      padding-left: 24px;
    }

    &:nth-child(2) {
      width: 200px;
    }

    &:nth-child(3) {
      width: 120px;
    }

    &:last-of-type {
      width: 64px;
    }

  }
}

tbody {
  tr {
    height: 48px;
    border-bottom: solid 1px $blue-600;
    .action-button {
      display: flex;
      justify-content: center;
      gap: 20px;
    }
    &:hover {
      background-color: $blue-650;
      .action-button {
        visibility: visible;
        opacity: 1;
      }
    }

    td {
      color: $blue-250;
      padding: 0 8px;
      white-space: nowrap;

      &:first-child {
        padding-left: 24px;
      }

      &:last-of-type {
        text-align: center;
      }

      .label {
        max-width: 400px;
      }
    }
  }
}
