@import './../../styles/variables';

.ark-ui-table {
  width: 100%;
  display: table;

  &-title {
    color: #27282E;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    margin-bottom: 0;
  }

  &-chips {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    background-color: white;
    padding-top: 4px;

    .ark-ui-default-table-chips {
      margin: 0;
    }

    .ark-ui-button {
      height: 24px;
      padding: 4px 8px;

      .ark-ui-button-label {
        font-size: 14px;
        line-height: 16px;
        font-weight: 400;
        margin: 0;
        padding: 0;
      }
    }
  }

  &-header {
    position: sticky;
    top: 0;
    display: table-header-group;
    background-color: #F6F6FA;
    z-index: ($elementPriority + 1);

    &-modal {
      &-body {
        width: 100%;
        overflow: hidden;

        display: flex;
        justify-content: center;

        border-radius: 12px;
        border: 1px solid #F0F1F7;

        .ark-ui-calendar-head {
          border-radius: 0;
        }

        .ark-ui-double-calendar.under {
          width: 100%;
        }
      }
    }

    .ark-ui-table-header-row {
      background-color: #F6F6FA;
      .ark-ui-table-header-cell {
        position: relative;
        display: table-cell;
        vertical-align: top;
        box-sizing: border-box;

        &-tooltip {
          width: 100% !important;

          .ark-ui-tooltip-cloud {
            max-width: 100%;
          }
        }

        .ark-ui-select-head {
          background: transparent !important;
          background-color: transparent !important;
        }

        .default-table-header,
        .ark-ui-period-calendar-input,
        .ark-ui-select,
        .ark-ui-select-head
        {
          position: static !important;
        }

        .ark-ui-select-dropdown
        {
          left: 0;
        }

        &:hover,
        &:has(div > .is-selected),
        &:has(div > .is-opened),
        &:has(div > .ark-ui-table-range-number-header-head.active)
        {
          background-color: $gray-200 !important;

          .ark-ui-table-header-sort,
          .ark-ui-table-header-search,
          .ark-ui-select-head,
          .ark-ui-table-text-header-head,
          .ark-ui-table-range-number-header-head,
          .ark-ui-period-calendar-input-head
          {
            path {
              fill: $gray-500;
            }
          }

          &.ark-ui-table-checkbox-cell, &.ark-ui-table-expand-cell {
            background-color: transparent !important;
          }
        }
      }

      .ark-ui-table-checkbox-cell {
        padding: 15px 15px 15px 17px;
      }

      .ark-ui-table-expand-cell {
        position: sticky;
        box-shadow: none;
        padding-left: 24px;
        padding-right: 24px;
        background-color: inherit;
        z-index: $element;
      }
    }

    .ark-ui-table-call-resizer {
      &-item {
        width: 2px;
        height: 100%;

        &.active {
          background-color: #A3A7B9;
        }
      }
    }

    .ark-ui-select-arrow {
      top: 12px;
      width: 24px;
      height: 24px;
      border-radius: 2px;

      &:hover {
        background-color: #D3D5E5 !important;
      }
    }
  }

  &-wrapper {
    border: 1px solid #F0F1F7;
    border-radius: 8px;
    position: relative;

    &.with-modal-filters {
      .ark-ui-period-calendar-input-body {
        display: none !important;
      }

      .default-table-header:has(.ark-ui-calendar-input-wrap.is-opened),
      .default-table-header:has(.ark-ui-period-calendar-input-head.is-opened) {
        background-color: inherit;
      }
    }

    &:has(.ark-ui-line-loader) {
      .ark-ui-table-body-wrapper {
        height: calc(100vh - 216px);
      }
    }

    &.is-data-loader-inside {
      .ark-ui-table-body-wrapper {
        overflow: hidden;
      }
    }
  }

  &-top {
    align-items: center;
    background: white;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    padding: 16px;
    gap: 16px;

    &.ark-ui-table-top-small-padding-bottom {
      padding-bottom: 8px;
    }

    &-info {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
  }

  &-count {
    display: flex;
    gap: 16px;

    &-number {
      color: #27282E;
      font-size: 14px;
      line-height: 16px;
      font-weight: 400;
      display: flex;
      align-items: center;
      column-gap: 4px;
    }

    &-loader {
      width: 16px;
      height: 16px;
      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13 8C13 5.23849 10.7615 3 8 3C5.23848 3 3 5.23848 3 8C3 10.7615 5.23848 13 8 13C10.7615 13 13 10.7615 13 8ZM14 8C14 4.6862 11.3138 2 8 2C4.6862 2 2 4.6862 2 8C2 11.3138 4.6862 14 8 14C11.3138 14 14 11.3138 14 8Z' fill='%23D3D5E5'/%3E%3Cpath d='M7.5007 3.02462C5.13786 3.25886 3.25886 5.13786 3.02462 7.5007C2.99737 7.7755 2.77614 8 2.5 8C2.22386 8 1.99783 7.77536 2.02052 7.50015C2.26092 4.58506 4.58505 2.26092 7.50015 2.02052C7.77536 1.99783 8 2.22386 8 2.5C8 2.77614 7.77549 2.99737 7.5007 3.02462Z' fill='%2327282E'/%3E%3C/svg%3E%0A");
      animation: uiExpandLoader 2s linear infinite;
    }
  }

  &-buttons {
    align-items: center;
    column-gap: 8px;
    display: flex;
    justify-content: space-between;
    min-width: fit-content;
    align-self: start;
  }

  &-header,
  &-body {
    .ark-ui-table-call-resizer {
      width: 4px;
      cursor: col-resize;

      display: flex;
      justify-content: flex-end;

      top: 0;
      position: absolute;

      &-before {
        left: 0;
      }

      &-after {
        right: 0;
      }

      &-draggable {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    }

    .ark-ui-table-multiple-checkbox {
      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiByeD0iMyIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzc3RDZERiIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxyZWN0IHg9IjYiIHk9IjYiIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIHJ4PSIyIiBmaWxsPSIjNzdENkRGIi8+Cjwvc3ZnPgo=");
      background-repeat: no-repeat;
    }
  }

  &-body {
    background: white;

    &-wrapper {
      height: calc(100vh - 212px);
      overflow: scroll;
      width: 100%;

      &-inner {
        position: relative;
        width: 100%;

        .ark-ui-table {
          position: relative;
        }

        .ark-ui-table-pagination-trigger-top, .ark-ui-table-pagination-trigger-bottom {
          position: absolute;
          width: 100%;
          height: 1px;
          min-height: 1px;
        }

        .ark-ui-table-pagination-trigger-top {
          top: 0;
        }

        .ark-ui-table-pagination-trigger-bottom {
          bottom: 0;
        }

        & + .ark-ui-no-data {
          border-radius: 0;
        }
      }

      &:has(.ark-ui-no-data) {
        overflow: hidden;
      }

      .ark-ui-data-loader-box {
        border: none;
        border-radius: 0;
        height: 100% !important;
      }
    }

    &-row {
      background-color: white;
      .ark-ui-table-body-cell {
        position: relative;
        display: table-cell;
        vertical-align: top;
        box-sizing: border-box;
        padding: 12px 16px;
        border-bottom: 1px solid #F6F6FA;
        overflow: hidden;

        &-inner {
          color: #585B69;
        }

        .ark-ui-radiobutton {
          margin-top: 15px;
        }

        .ark-ui-table-cell-wrapper {
          display: flex;
          align-items: center;

          .ark-ui-table-expand {
            margin-top: 16px;
          }

          &:has(.ark-ui-table-expand) {
            align-items: flex-start;
          }

          &:has(.table-edit-input) {
            display: block;
          }
        }
      }

      &.is-selected {
        background-color: #ECF9FA;
      }

      &.is-disabled-row * {
        color: #A3A7B9;
      }

      &:hover {
        background-color: #F6F6FA;

        .ark-ui-table-expand-cell {
          background-color: #F6F6FA;
        }
      }
    }

    .ark-ui-table-call-resizer {
      &-item {
        width: 1px;
        height: 100%;

        &.active {
          background-color: #D3D5E5;
        }
      }
    }
  }

  &-expand {
    background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 6.5L8 10.5L4 6.5' stroke='%23A3A7B9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center center no-repeat;
    cursor: pointer;
    display: block;
    height: 16px;
    transition: 0.4s;
    width: 16px;
    margin-right: 8px;

    &.is-expanded {
      transform: rotate(180deg);
    }

    &.loading {
      background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.11752 11.8824C3.91858 12.0813 3.91728 12.4057 4.13238 12.5871C4.75188 13.1094 5.47219 13.502 6.25065 13.7393C7.19193 14.0262 8.18932 14.0771 9.15494 13.8877C10.1206 13.6983 11.0248 13.2743 11.7879 12.653C12.551 12.0318 13.1497 11.2324 13.531 10.3253C13.9124 9.41815 14.0648 8.43116 13.9748 7.45125C13.8848 6.47135 13.5552 5.52862 13.015 4.70613C12.4748 3.88364 11.7406 3.20663 10.8771 2.73477C10.1629 2.34452 9.37848 2.1045 8.57187 2.02726C8.2918 2.00044 8.06088 2.22834 8.05791 2.50968C8.05494 2.79102 8.28122 3.01881 8.56079 3.05049C9.20013 3.12293 9.82106 3.31877 10.3885 3.62886C11.1054 4.0206 11.7149 4.58264 12.1634 5.26546C12.6118 5.94828 12.8855 6.73092 12.9602 7.54443C13.0349 8.35793 12.9084 9.17732 12.5918 9.9304C12.2752 10.6835 11.7782 11.3471 11.1447 11.8629C10.5111 12.3786 9.76046 12.7306 8.95881 12.8879C8.15716 13.0452 7.32914 13.0028 6.5477 12.7647C5.92915 12.5761 5.35481 12.2695 4.85576 11.8633C4.63754 11.6857 4.31647 11.6834 4.11752 11.8824Z' fill='%23A3A7B9'/%3E%3Cpath d='M12.9754 7.5007C12.7411 5.13786 10.8621 3.25886 8.4993 3.02462C8.2245 2.99737 8 2.77614 8 2.5C8 2.22386 8.22464 1.99783 8.49985 2.02052C11.4149 2.26092 13.7391 4.58505 13.9795 7.50015C14.0022 7.77536 13.7761 8 13.5 8C13.2239 8 13.0026 7.77549 12.9754 7.5007Z' fill='%23A3A7B9'/%3E%3C/svg%3E%0A") center center no-repeat;
      animation: uiExpandLoader 2s linear infinite;
      transition: .2s;
    }
  }

  &-eyesight {
    position: sticky !important;
    left: var(--horizontalEyesightMargin) !important;
    background-color: inherit !important;
    z-index: $element !important;
    &::before {
      content: '';
      position: absolute;
      left: -3px;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: inherit;
      z-index: -1;
    }
  }

  &-checkbox-fixed {
    position: sticky !important;
    left: 0 !important;
    background-color: inherit !important;
    z-index: $element !important;
    transition: 0s;
    padding: 16px;
    max-width: 48px;
    &::before {
      content: '';
      position: absolute;
      left: -3px;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: inherit;
      z-index: -1;
      max-width: 48px;
    }
  }

  .ark-ui-table-expand-cell {
    position: sticky;
    left: 0;
    background-color: white;
    transition: 0s;
    padding: 16px;
    z-index: $element;
    max-width: 48px;
    &::before {
      content: '';
      position: absolute;
      left: -3px;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: inherit;
      z-index: -1;
      max-width: 48px;
    }
  }
  .ark-ui-table-body-row.is-selected {
    .ark-ui-table-expand-cell {
      background-color: #ECF9FA;
    }
    &:hover {
      .ark-ui-table-expand-cell {
        background-color: #F6F6FA;
      }
    }
  }
}

.ark-ui-tree-table {
  .ark-ui-table-header {
    display: table-header-group;
  }

  .ark-ui-table-body {
    display: table-row-group;
  }

  .ark-ui-table-header-row, .ark-ui-table-body-row {
    display: table-row;
  }

  .ark-ui-table-body-row.is-disabled-row * {
    color: #A3A7B9;
  }
}

.table-no-data {
  .ark-ui-table-header {
    pointer-events: none;
  }
}

@keyframes uiExpandLoader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}