.sui-o-datalist {
  overflow: auto;

  &__header,
  &__row {
    position: relative;
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-wrap: nowrap;
    border-bottom: $sui-size-border solid $sui-color-border;
    padding: 0 $sui-space-xs;
    transition: background .2s;

    @include suiDatalistRowModifiers();

    @each $breakpoint in $sui-breakpoint-modifiers {
      @include suiMediaMin(nth($breakpoint, 1)) {
        @include suiDatalistRowModifiers(nth($breakpoint, 2));
      }
    }
  }

  &__preheader {
    display: flex;
    font-size: $sui-font-size-sm;
    text-transform: uppercase;
    font-weight: bold;
    align-items: flex-end;
    padding: 0 0.39062rem;

    > .sui-o-datalist__col {
      border-right: $sui-size-border solid $sui-color-border;
      margin: 0;
      padding: $sui-space-sm 0;

      > * {
        padding: 0 $sui-space-xs;
      }

      &:last-child {
        border-right: none;
      }
    }

    + .sui-o-datalist__header {
      > .sui-o-datalist__col:last-child:empty {
        border-left: $sui-size-border solid $sui-color-border;
      }
    }
  }

  &__header {
    font-size: $sui-font-size-sm;
    text-transform: uppercase;
    font-weight: bold;
    align-items: flex-end;

    &--secondary {
      border-bottom: none;
      border-right: $sui-size-border solid $sui-color-border;
    }
  }

  &__col.as--index {
    font-size: $sui-font-size-sm;
    text-transform: uppercase;
    font-weight: bold;
    align-items: flex-end;
    border-bottom: none;
    border-right: $sui-size-border solid $sui-color-border;
    position: sticky;
  }

  &__row {
    &:first-child {
      border-top: $sui-size-border solid $sui-color-border;
    }

    &::before {
      content: '';
      position: absolute;
      top: $sui-size-border * -1;
      left: 0;
      bottom: $sui-size-border * -1;
      width: rem(3);
      background: $sui-color-primary;
      opacity: 0;
      transition: .2s;
    }
  }

  &.as--hover &__row:hover,
  &.as--hover &__row:focus {
    background: $sui-color-brand-denim-200;
  }

  &.as--sorted &__col {
    padding: rem(9) rem(15);

    &--sortable {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  &__col {
    flex: 1;
    min-width: 0;
    padding: $sui-space-sm $sui-space-xs;
    text-decoration: none;
    color: inherit;
    transition: .2s;

    @include suiDatalistColModifiers();

    @each $breakpoint in $sui-breakpoint-modifiers {
      @include suiMediaMin(nth($breakpoint, 1)) {
        @include suiDatalistColModifiers(nth($breakpoint, 2));
      }
    }

    &:empty {
      min-height: 2.6rem;
    }

    &__sort {
      padding-left: rem(2);

      &-up,
      &-down {
        width: 0;
        height: 0;
        border: 0;
        padding: 0;
        display: block;
      }

      &-up {
        border-left: rem(5) solid transparent;
        border-right: rem(5) solid transparent;
        border-bottom: rem(5) solid rgba(38, 61, 92, 0.2);

        &.as--active {
          border-bottom-color: #263d5c;
        }
      }

      &-down {
        border-left: rem(5) solid transparent;
        border-right: rem(5) solid transparent;
        border-top: rem(5) solid rgba(38, 61, 92, 0.2);
        margin-top: rem(3);

        &.as--active {
          border-top-color: #263d5c;
        }
      }
    }
  }

  &__title {
    font-size: $sui-font-size-ml;
    font-weight: 300;
  }

  &__details {
    margin: $sui-space-xxs 0;
    color: $sui-color-text-light;
    font-size: $sui-font-size-sm;
  }

  // -------------------------
  //    Dimmed
  // -------------------------
  &__row &__col.as--dimmed {
    opacity: .4;
    transition: .2s;
  }

  &.as--hover &__row:hover &__col.as--dimmed,
  &.as--hover &__row:focus &__col.as--dimmed {
    opacity: 1;
  }

  // -------------------------
  //    Link
  // -------------------------
  &__row &__col.as--link {
    transition: .2s;
  }

  &:not(.as--hover) &__row &__col.as--link {
    color: $sui-color-primary;
  }

  &.as--hover &__row:hover &__col.as--link,
  &.as--hover &__row:focus &__col.as--link {
    color: $sui-color-primary;
  }

  // -------------------------
  //    Icon
  // -------------------------
  &__col.as--icon {
    color: $sui-color-brand-denim-500;
    transition: .2s;
  }

  &.as--hover &__row &__col.as--icon {
    color: $sui-color-brand-denim-400;
  }

  &.as--hover &__row:hover &__col.as--icon,
  &.as--hover &__row:focus &__col.as--icon {
    color: $sui-color-brand-denim-500;
  }

  // -------------------------
  //    Actions
  // -------------------------
  &__row &__col.as--actions {
    text-align: right;
    opacity: .4;
    transition: .2s;
  }

  &.as--hover &__row:hover &__col.as--actions,
  &.as--hover &__row:focus &__col.as--actions {
    opacity: 1;
  }

  // -------------------------
  //    Bordered
  // -------------------------
  &.as--bordered {
    border: $sui-size-border solid $sui-color-border;
    border-radius: $sui-border-radius-md;
    padding: rem(1) 0; // Fix scroll

    & > :first-child {
      border-top: none;
      border-top-left-radius: $sui-border-radius-md;
      border-top-right-radius: $sui-border-radius-md;
    }

    & > :last-child {
      border-bottom: none;
      border-bottom-left-radius: $sui-border-radius-md;
      border-bottom-right-radius: $sui-border-radius-md;
    }
  }

  &.as--bordered &__header {
    background: $sui-color-brand-denim-200;
  }

  &.as--bordered &__row {
    background: $sui-color-brand-denim-100;
  }

  // -------------------------
  //    Inner Border
  // -------------------------
  &.as--inner-border &__col {
    &:not(:first-child) {
      border-left: rem(1) solid rgba(217, 219, 227, 0.3);
    }
  }

  // -------------------------
  //    Light
  // -------------------------

  &.as--light {
    & > :first-child {
      border-top: none;

      &::before {
        top: 0;
        bottom: 0;
      }
    }

    & > :last-child {
      border-bottom: none;

      &::before {
        top: 0;
        bottom: 0;
      }
    }
  }

  // -------------------------
  //    Row active
  // -------------------------
  html body & &__row.as--active {
    background: $sui-color-brand-denim-200;

    &::before {
      opacity: 1;
    }
  }

  html body &.as--hover &__row:hover.as--active,
  html body &.as--hover &__row:focus.as--active {
    background: $sui-color-brand-denim-200;
  }

  // -------------------------
  //    Row disabled
  // -------------------------
  &__disabled-overlay {
    display: none;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    align-items: center;
    justify-content: center;
  }

  html body & &__row.as--disabled &__disabled-overlay {
    display: flex;
  }

  html body & &__row.as--disabled {
    pointer-events: none;
  }

  html body & &__row.as--disabled &__col {
    opacity: 0.4;

    &.as--dimmed {
      opacity: 0.2;
    }
  }

  // -------------------------
  //    Responsive
  // -------------------------
  @each $breakpoint in $sui-breakpoints {
    @include suiMediaMax(nth($breakpoint, 1)) {
      @include suiDatalistLevel('.as--level-breakpoint-#{nth($breakpoint, 2)}');
    }
  }
}