@import "./mixins.scss";

gas-table,
.gas-table {
  .gas-table-thead {
    background-color: var(--list-normal-header);

    tr {
      &:first-child {
        border-top: var(--border-line-normal);
      }

      th {
        @include regular-size-3-bold();
        text-align: left;
        min-width: 120px;
      }
    }
  }

  .gas-table-tbody {
    tr {
      td {
        @include regular-size-3();
        min-width: 120px;

        &.empty-message {
          .gas-empty-message__content {
            display: flex;
            flex-direction: column;
            align-items: center;
          }
        }
      }

      &.gas-selectable-table-row {
        &.gas-selectable-table-row__selected {
          background-color: var(--list-normal-selected);
        }

        &:hover {
          background-color: var(--list-normal-hover);
        }
      }
    }
  }

  tr {
    min-height: var(--xxlg-size);
    border-bottom: var(--border-line-normal);
    display: flex;
    align-items: center;
    justify-content: flex-start;

    th, td {
      padding: var(--xxs-size) var(--sm-size);
      flex: 1;
    }

    th.gas-selectable-th,
    td.gas-selectable-td {
      max-width: var(--xxlg-size);
      display: flex;
      justify-content: center;
      min-width: 40px;
      width: 40px;
      box-sizing: border-box;

      .gas-table-checkbox {
        gas-checkbox {
          width: var(--md-size);
          height: var(--md-size);
        }
      }
    }
  }

  th._sorting {
    min-height: var(--xxlg-size);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    cursor: pointer;
    color: var(--icon-medium);

    &._active {
      color: var(--icon-dark);
    }

    gas-table-sorting {
      margin-left: var(--xs-size);
      color: var(--icon-medium);
      transform: rotate(180deg);
      transition: transform 0.3s;

      &._desc {
        transform: rotate(0deg);
      }

      &._active {
        color: var(--icon-dark);
      }
    }
  }
}