//from bootstrap
// List options

// [converter] extracted from `.list-unstyled` for libsass compatibility
@mixin list-unstyled {
  padding-left: 0;
  list-style: none;
}

// [converter] extracted as `@mixin list-unstyled` for libsass compatibility
.list-unstyled {
  @include list-unstyled;
}

// Inline turns list items into inline-block
.list-inline {
  @include list-unstyled;
  margin-left: -5px;

  > li {
    padding-left: 5px;
    padding-right: 5px;
    display: inline-block;
  }
}

//end

ul {
  @include list-unstyled;
}

.list {
  list-style-type: disc;
  padding-left: $margin-quadruple;
}

.cux-list-check {
  display: block;
  color: $text-color;
  margin: 0 0 $margin-normal;
  padding: 0;
  z-index: 1;

  li {
    @extend %flexbox-row;
    align-items: baseline;
    font-weight: bold;
    border-top: 1px solid $color-tui-grey-50;
    padding: $margin-normal;

    &:last-child {
      border-bottom: 1px solid $color-tui-grey-50;
    }
  }

  .pictogram {
    position: relative;
    top: .25em;
  }

  .text {
    vertical-align: baseline;
  }
}

.icon-list {
  .pictogram {
    color: $color-beige-300;
  }
}

.tui-breadcrumb {
  @include font-size(14);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 0 $margin-normal;
  display: block;
  min-width: 1px;
  width: 100%;

  > li {
    display: inline;
    margin: 0;
    padding: 0;

    &:not(:last-child):after {
      content: ' / ';
      margin: 0 $margin-quarter;
      padding: 0;
      color: $color-beige-300;
    }
  }

  @include breakpoint(md) {
    @include font-size(18);
  }
}

.main-content > section.breadcrumb-variation-b {
  padding-bottom: 0;
  padding-top: $margin-normal;

  .tui-breadcrumb {
    background: $color-blue-100;
    margin: 0;
    padding: $margin-double;
    font-weight: bold;
    border: 1px solid rgba($color-blue-400, .2);
    border-bottom: 0;
    border-radius: $border-radius-normal $border-radius-normal 0 0;
  }
}

.modal-breadcrumb {
  display: none;
}

%key-value-list-mobile {
  @extend %flexbox-column;

  li {
    background: inherit;
    position: relative;

    &:not(:last-child) {
      margin-bottom: $margin-half;
    }

    .wrapper {
      @extend %flexbox-row;
      align-items: center;
      background: $color-blue-200;
      border-radius: $border-radius-normal;
      padding: $margin-normal;
    }

    .text-value {
      @extend %flexbox-row;
      width: 100%;
      margin-left: $margin-normal;
    }

    .value {
      margin-left: auto;
      text-align: right;
      font-weight: bold;
    }
  }
}

.tui-list-key-value {
  &.col-double {
    position: relative;

    @include breakpoint(sm) {
      columns: 2;
      column-gap: 3px;
    }

    > li {
      break-inside: avoid;
      padding: $margin-half $margin-normal;
      border-radius: $border-radius-normal;
      margin-top: $margin-quarter;
      display: inline-block;
      width: 100%;

      .item {
        @extend %flexbox-row;
        justify-content: space-between;
        align-items: center;
      }
    }

    .key {
      text-align: left;
      margin-bottom: 0;
    }

    .value {
      margin-bottom: 0;
      text-align: right;
    }
  }

  &.grid-triple {
    @extend %flexbox-row;
    flex-wrap: wrap;
    background: rgba($color-blue-200, .5);
    margin: 0 0 $margin-double;

    @include breakpoint(sm) {
      padding: $margin-double;
    }

    > li {
      @extend %flexbox-column;
      margin: $margin-quarter;
      justify-content: center;
      align-items: center;
      background: $color-blue-200;
      width: calc(#{percentage(1 / 3)} - #{$margin-half});
      padding: $margin-normal;
      text-align: center;
    }

    .key {
      font-weight: normal;
      margin-bottom: 0;
    }

    .value {
      font-weight: bold;
      margin-bottom: 0;
    }
  }
}

.cruise-ship-navigation {
  .tui-list-key-value.grid-triple {
    background: transparent;
    padding: 0;
    margin-bottom: $margin-triple;
    margin-top: -$margin-quarter;

    li:nth-child(3n + 1) {
      margin-left: 0;
    }
  }
}

.header-and-text-list {
  @extend %flexbox-column;
  margin: 0;

  @include breakpoint(md) {
    flex-direction: row;
  }

  li {
    @include breakpoint(md) {
      max-width: calc(#{percentage(1 / 4)} - #{$margin-enterprise});
    }

    flex-grow: 1;
    margin: $margin-normal $margin-enterprise;
  }

  h4 {
    color: $color-grey;
  }
}

.bulleted-inline-list {
  @extend %flexbox-row;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  margin: 0;

  li {
    white-space: nowrap;
    padding: 0;

    &:not(:first-child):before {
      content: '\2022';
      padding: 0 $margin-half;
    }
  }
}