@use './colors';

@mixin header {
  .seam-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    padding: 0 16px;

    .seam-body {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .seam-table-header-loading-wrap {
      width: 100%;
      position: absolute;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .seam-table-title {
    font-size: 21px;
    line-height: 132%;

    .seam-caption {
      font-size: 16px;
      line-height: 134%;
    }
  }
}

@mixin row {
  .seam-table-row {
    display: flex;
    padding: 4px;
    height: 72px;
    border-bottom: 1px solid colors.$divider-stroke-light;

    &:hover {
      background: rgb(244 246 248 / 100%);
    }

    .seam-title {
      font-weight: 600;
      font-size: 18px;
      line-height: 132%;
    }
  }
}

@mixin cell {
  .seam-table-cell {
    display: flex;
    align-items: center;
    padding: 4px;
  }
}

@mixin empty-placeholder {
  .seam-table-empty-placeholder {
    height: 300px;
    font-size: 18px;
    line-height: 132%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@mixin table-filters {
  .seam-table-filter-bar {
    display: flex;
    align-items: center;
    padding: 6px 16px;
    background: colors.$bg-a;

    .seam-clear-filters-button {
      margin-left: 6px;
      border: 0;
      background: transparent !important;
      padding: 0;

      svg {
        font-size: 20px;

        * {
          fill: colors.$text-gray-1;
        }
      }
    }
  }

  .seam-table-filter-item {
    display: flex;
    align-items: center;
    padding: 2px 8px 2px 5px;
    border-radius: 5px;
    border: 1px solid colors.$bg-a;
    font-size: 14px;
    line-height: 134%;

    svg {
      font-size: 19px;
      margin: 3px 4px;
    }

    &.seam-clickable {
      cursor: pointer;

      &:hover {
        background: rgb(255 255 255 / 65%);
        border: 1px solid colors.$text-gray-3;
      }
    }

    &.seam-selected {
      background: colors.$white;
      border: 1px solid colors.$text-gray-3;
    }
  }
}

@mixin all {
  @include header;
  @include row;
  @include cell;
  @include empty-placeholder;
  @include table-filters;
}