@import '../settings/variables';
@import '../tools/mixins/grid';
@import '../tools/mixins/breakpoints';

.c-data-table-container {
  $scroll-indicator-width: 3.75em;

  color: $color-secondary-dark;
  display: flex;
  flex-wrap: wrap;

  &--scrollable {
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 7.5em;
  }

  &__responsive-size {
    &--xl {
      flex: 1;

      @include media-breakpoint-down(xl) {
        min-width: map-get($grid-breakpoints, xl);
        width: map-get($grid-breakpoints, xl);
      }

      @media print {
        width: unset;
        min-width: unset;
      }
    }
  }

  &__scroll-indicator {
    &--padded {
      @include media-breakpoint-down(xxl) {
        padding-right: $scroll-indicator-width;
      }

      @media print {
        padding: 0;
      }
    }

    @include media-breakpoint-down(xxl) {
      position: absolute;
      display: flex;
      flex-direction: column;
      top: 0;
      right: 0;
      height: 100%;
      width: $scroll-indicator-width;
      z-index: $layer-content-attached;
    }

    @media print {
      display: none;
    }
  }

  &__scroll-indicator-icon {
    position: relative;
    left: 3em;
    animation: bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);

    @media print {
      display: none;
    }
  }

  &__scroll-indicator-icon-container {
    display: flex;
    flex: 1;
    justify-items: center;
    align-items: center;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white);

    @include media-breakpoint-up(xl) {
      display: none;
    }

    @media print {
      display: none;
    }
  }
}

.c-data-table-header-row {
  display: flex;
  flex-direction: row;
  padding: $gutter-big $gutter-small 1.5625em;
  background-color: $color-background;
}

.c-data-table-row-label {
  display: flex;
  flex-direction: column;
  padding: 0 $gutter-small 0 $gutter-small;

  @media print {
    font-weight: $font-weight-normal;
    font-size: 0.6875em;
    text-transform: none;
  }

  &__value {
    font-family: $font-maersk-headline;
    font-size: $font-size-medium;
    line-height: $base-font-size;
    font-weight: $font-weight-bold;
    text-transform: uppercase;
  }

  &--sortable {
    cursor: pointer;
  }

  &__sort-indicator {
    visibility: hidden;
    font-size: 0.8em;
    position: absolute;
    top: 3px;
    margin-left: 0.5em;

    &--visible {
      visibility: visible;
    }

    @media print {
      display: none;
    }
  }

  &:hover &__sort-indicator {
    visibility: visible;
  }
}

.c-data-table-data-row {
  display: flex;
  flex: 0 0 100%;
  margin-bottom: 0.8571em;
  padding: 0.875em $gutter-small;
  background-color: $color-background-alternative;
  border: 1px solid $color-background-alternative;
  border-radius: 2px;

  &--clickable {
    cursor: pointer;

    &:hover {
      background-color: $color-background;
      border: 1px solid $color-separator;
      box-shadow: 0 0.2857em 0.7142em rgba(0, 0, 0, 0.05);
    }
  }

  &--with-parent-width {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

.c-data-table-columns-header {
  &__item {
    color: $color-dark-grey;
    font-family: $font-maersk-headline;
    font-size: $font-size-medium;
    line-height: $base-font-size;
    letter-spacing: 1.2px;
    padding-bottom: 8px;
    border-bottom: 1px solid $color-separator;
  }
}

.c-data-table-base-cell {
  font-size: $font-size-caption;
  line-height: 1.571em;  
}

.c-data-table-summary-icon {
  display: flex;
  line-height: 2.2em;
  font-size: 10px;
}