@mixin suiDatalistLevel($prefix: '') {
  &#{$prefix} &__row {
    flex-wrap: wrap;
    padding: $sui-space-xs $sui-space-sm;
  }

  &#{$prefix} &__header &__col:not(.as--level-primary) {
    display: none;
  }

  &#{$prefix} &__col.as--level-primary {
    order: -1;
  }

  &#{$prefix} &__col.as--level-secondary {
    order: 1;
    flex-basis: 100%;

    &::before {
      content: attr(data-label);
      display: block;
      font-size: $sui-font-size-xs;
      text-decoration: none;
      text-transform: uppercase;
      opacity: 0.6;
    }
  }

  &#{$prefix} &__col.as--actions {
    order: 1;
    flex-basis: 100%;
    margin: $sui-space-xs;
    background: $sui-color-brand-denim-300;
    border-radius: $sui-border-radius-md;
  }
}

@mixin suiDatalistRowModifiers($suffix: '') {
  &.as--align-middle#{ $suffix } {
    align-items: center;
  }

  &.as--align-top#{ $suffix } {
    align-items: flex-start;
  }

  &.as--align-bottom#{ $suffix } {
    align-items: flex-end;
  }
}

@mixin suiDatalistColModifiers($suffix: '') {
  // -------------------------
  //    Vertical Alignment
  // -------------------------
  &.as--align-top#{ $suffix },
  &.as--align-bottom#{ $suffix },
  &.as--align-middle#{ $suffix } {
    display: flex;
    flex-wrap: wrap;

    &::before {
      width: 100%;
    }

    > * {
      min-width: 0;
    }
  }

  &.as--align-middle#{ $suffix } {
    align-items: center;
  }

  &.as--align-top#{ $suffix } {
    align-items: flex-start;
  }

  &.as--align-bottom#{ $suffix } {
    align-items: flex-end;
  }

  // -------------------------
  //    Horizontal Alignment
  // -------------------------
  &.as--align-center#{ $suffix } {
    text-align: center;
    justify-content: center;
  }

  &.as--align-left#{ $suffix } {
    text-align: left;
    justify-content: flex-start;
  }

  &.as--align-right#{ $suffix } {
    text-align: right;
    justify-content: flex-end;
  }

  // -------------------------
  //    Fix width
  // -------------------------

  &.as--size-xxs#{ $suffix } {
    flex: none;
    flex-basis: $sui-size-xxs;
  }

  &.as--size-xs#{ $suffix } {
    flex: none;
    flex-basis: $sui-size-xs;
  }

  &.as--size-sm#{ $suffix } {
    flex: none;
    flex-basis: $sui-size-sm;
  }

  &.as--size-md#{ $suffix } {
    flex: none;
    flex-basis: $sui-size-md;
  }

  &.as--size-lg#{ $suffix } {
    flex: none;
    flex-basis: $sui-size-lg;
  }

  &.as--size-xl#{ $suffix } {
    flex: none;
    flex-basis: $sui-size-xl;
  }

  &.as--size-xxl#{ $suffix } {
    flex: none;
    flex-basis: $sui-size-xxl;
  }

  // -------------------------
  //    Fluid width
  // -------------------------
  &.as--grow-1#{ $suffix } {
    flex-grow: 1;
  }

  &.as--grow-2#{ $suffix } {
    flex-grow: 2;
  }

  &.as--grow-3#{ $suffix } {
    flex-grow: 3;
  }

  &.as--grow-4#{ $suffix } {
    flex-grow: 4;
  }

  &.as--grow-5#{ $suffix } {
    flex-grow: 5;
  }

  &.as--grow-6#{ $suffix } {
    flex-grow: 6;
  }

  &.as--grow-7#{ $suffix } {
    flex-grow: 7;
  }

  &.as--grow-8#{ $suffix } {
    flex-grow: 7;
  }
}
