$base: unquote(".ui-table");
$cell-padding: 0.2em;
$border-color: #eaeaea;

.ui-table {
  .ui-align {
    &--start {
      justify-content: start;
    }

    &--center {
      justify-content: center;
    }

    &--end {
      justify-content: end;
    }

    &--justify {
      justify-content: space-between;
    }
  }
  tbody tr {
    position: relative;
  }
}

@media screen and (min-width: ($breakpoints-md + 1)) {
  @for $spanindex from 1 through 24 {
    .span#{$spanindex} {
      grid-column: span #{$spanindex};
    }
  }

  .ui-table {
    > thead {
      position: sticky;
      top: 0;
      z-index: 1;

      > tr:last-child {
        border-bottom: none;
      }
    }

    &__header {
      &__cell {
        cursor: pointer;
        user-select: none;

        &__checkable,
        &__drang-and-drop,
        &__counter {
          align-items: center;
          text-align: center;
        }

        &__checkable {
          > div > ui-checkbox > label {
            grid-template-columns: auto;
          }
        }

        &__action,
        &__sorter {
          width: auto !important;
        }

        > div {
          padding: 0 0.5rem;
          display: flex;
          flex-direction: row;
          gap: 5px;
          align-items: center;
        }

        > div > div {
          font-weight: 600;
          font-size: $base-font-size;
          @include ellipsis();
          width: 0;
        }

        &__label {
          flex-grow: 1;
          padding-right: 0.2em;
        }

        ui-button > div > a {
          width: max-content;
        }

        &__sorter {
          flex-grow: 0;
          width: auto;
          display: grid;
          grid-gap: 3px;
          margin-right: 0.5rem;
          justify-content: end;

          ui-icon {
            background-position: center;
            display: block;
            opacity: 0.25;
            &:first-child {
              border-top: 0;
            }
            &:last-child {
              border-bottom: 0;
            }
          }

          &[data-sort="asc"] {
            ui-icon:first-child {
              opacity: 0.8;
            }
          }

          &[data-sort="desc"] {
            ui-icon:last-child {
              opacity: 0.8;
            }
          }
        }
      }
    }

    &__cell {
      padding: $cell-padding;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      &.draggable:hover,
      .draggable-handle:hover {
        cursor: grab;
      }

      > div,
      > a {
        width: 0;
        min-width: 100%;
        min-height: 1.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &___counter,
      &__action {
        width: auto !important;
      }

      > div {
        padding: 0.5em;
        padding-block: 0px;
        line-height: initial;
      }
    }

    &__cell__checkable,
    &__header__cell__checkable {
      label {
        grid-template-columns: auto;
      }
    }

    .draggable {
      position: relative;
      overflow: visible;
    }

    &__draggable-handle {
      width: auto !important;
      display: flex;
      align-items: center;

      & > div {
        display: none;
      }

      &.gu-transit {
        font-size: 0.8em;
        position: absolute;
        left: 0;
        height: 20px;
        overflow: visible;
        opacity: 1;
        text-indent: -9999px;
      }

      &.gu-transit::before {
        content: "\25ba";
        display: block;
        position: absolute;
        opacity: 1;
        top: 0;
        left: 0;
        text-indent: 0px;
      }
    }
  }

  .ui-table-with-border {
    > tbody > tr > .ui-table__cell {
      border: solid 1px $border-color;
      padding: 0;
      border-radius: 0;

      > div {
        padding: 0;

        > span {
          padding: 0 10px;
        }

        > ui-date-picker {
          flex-grow: 1;
        }
        > .ui-input,
        ui-date-picker > .ui-field__wrapper,
        .ui-select {
          border: none;
          height: inherit;
          border-radius: 0;
          margin: 0;
        }

        > .ui-input.ui-input--invalid {
          position: inherit;
        }

        > .ui-select > .select2 > .selection > .select2-selection > .select2-selection__clear {
          align-items: center;
        }

        > ui-date-picker > .ui-field__wrapper {
          > div {
            .ui-dropdown__link {
              padding: 5px;
            }
          }

          > .ui-input {
            border-right: none;
          }
        }

        > ui-button {
          margin: 0;
          width: 100%;

          .ui-btn__inner {
            border-radius: 0;
            height: inherit;
          }
        }

        > .digi-dragdrop {
          padding: 0 5px;
        }
      }
    }
  }

  .ui-table-compact {
    .ui-table__header__cell {
      padding: 0;
    }
    
    .ui-table__header__cell,
    .ui-table__cell {
      > div {
        padding: 0;
      }
    }
  }
}

@media screen and (max-width: $breakpoints-md) {
  @for $spanindex from 2 through 24 {
    .span#{$spanindex} {
      grid-column: span 2;
    }
  }

  .ui-table {
    display: grid;
    row-gap: 5vh;

    &__row {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    &__sorter {
      display: none;
    }

    &__container {
      display: grid;
      text-align: center;
    }

    &__header {
      align-items: center;
      display: grid;

      &__checkable {
        grid-auto-flow: column;
        grid-template-columns: auto 1fr;
        align-content: center;
      }
    }

    &__header,
    &__header__checkable {
      padding: 5px;
      text-transform: uppercase;

      div {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &:first-child {
          text-align: center !important;
        }
      }
    }

    &__cell {
      display: grid;
      min-height: 3vh;

      div,
      a {
        padding: 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
