$riu-width: 2.43;

.tui-concept-logo {
  $size: 16px;
  @include font-size(14);
  display: inline-flex;
  align-items: center;
  height: $margin-double;
  padding: 0 $margin-half;
  line-height: $size;
  font-weight: bold;
  vertical-align: bottom;
  color: $color-white;
  text-transform: uppercase;

  .pictogram {
    display: inline-block;
    min-width: 0;
    flex-shrink: 1;
    height: $size;
    width: $size;
    position: relative;
    vertical-align: bottom;
    margin-right: $margin-half;
  }

  .pictogram-riu {
    height: 8px;
    width: 20px;
    margin-right: 0;
    left: 0;
  }

  &.riu {
    .text {
      display: none;
    }
  }

  &.bluestar {
    .pictogram {
      display: none;
    }

    .text {
      text-transform: none;
      font-weight: normal;
    }
  }

  &.suneoclub {
    h2,
    .text {
      word-spacing: -.25em;
      text-transform: capitalize;
    }

    p,
    b {
      color: $color-white;
    }
  }

  &.tui-blue-for-all,
  &.tui-blue-for-two,
  &.tui-blue-for-families {
    padding-right: 0;

    &:after {
      height: 24px;
      border-left: 1px solid $color-white;
      display: inline-flex;
      align-items: center;
      padding-left: $margin-half;
      padding-right: $margin-half;
    }

    .pictogram {
      display: none;
    }

    .text {
      margin-right: $margin-half;
    }
  }

  &.tui-blue-for-all {
    &:after {
      content: 'FOR ALL';
    }
  }

  &.tui-blue-for-families {
    &:after {
      content: 'FOR FAMILIES';
      background: $color-tui-blue-for-families;
    }
  }

  &.tui-blue-for-two {
    &:after {
      content: 'FOR TWO';
      background: $color-tui-blue-for-two;
    }
  }

  &.tuisensatori {
    padding-left: 0;

    &:before {
      content: 'TUI BLUE';
      height: 24px;
      border-right: 1px solid $color-white;
      display: inline-flex;
      align-items: center;
      padding-left: $margin-half;
      padding-right: $margin-half;
      background: $color-blue-500;
    }

    .text {
      margin-left: $margin-half;
    }
  }

  &.small {
    $size: 16px;
    @include font-size(14);
    height: 24px;
    line-height: $size;

    &.riu {
      padding-left: $margin-half;
    }

    .pictogram {
      height: $size;
      width: $size;
      margin-right: $margin-half;
    }

    .pictogram-riu {
      height: 8px;
      width: 20px;
      margin-right: 0;
      padding-right: 0;
    }
  }
}

@include breakpoint(sm) {
  $size: 16px;

  .tui-concept-logo:not(.small) {
    @include font-size(18);
    height: 36px;

    &.riu,
    &.bluestar {
      padding: 0 $margin-normal;

      .text {
        margin-right: 0;
      }
    }

    &.tui-blue-for-all,
    &.tui-blue-for-two,
    &.tui-blue-for-families {
      padding-left: $margin-normal;

      &:after {
        height: $margin-triple;
        padding-left: $margin-normal;
        padding-right: $margin-normal;
      }

      .text {
        margin-right: $margin-normal;
      }
    }

    &.tuisensatori {
      padding-left: 0;

      &:before {
        height: $margin-triple;
        padding-left: $margin-normal;
        padding-right: $margin-normal;
      }

      .text {
        margin-right: $margin-double;
        margin-left: $margin-normal;
      }
    }

    .pictogram {
      height: 24px;
      width: 24px;
      margin-right: $margin-normal;
    }

    .pictogram-riu {
      height: ($size - 4);
      width: ($size - 4) * $riu-width;
      margin-right: 0;
      left: 0;
    }

    .text {
      margin-right: $margin-half;
    }
  }
}

.tui-concept-banner {
  $size: 30px;
  @extend %flexbox-row;
  align-items: center;
  margin-bottom: $margin-double;

  .tui-concept-squared {
    margin-right: $margin-enterprise;
  }

  h2 {
    margin: 0 $margin-triple 0 0;
    display: inline-block;
  }

  .riu-heading,
  .bluestar-heading {
    display: none;
  }

  p {
    text-transform: uppercase;
    font-weight: bold;
    margin: 0;
    display: none;

    @include breakpoint (sm) {
      display: block;
    }
  }
}

.concept-logo-tile {
  width: 120px;

  img {
    width: 120px;
    vertical-align: bottom;
  }

  &.tui-blue-for-all-tile,
  &.tui-blue-for-two-tile,
  &.tui-blue-for-families-tile {
    &:after {
      @include font-size(14);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      height: $margin-double;
      color: $color-white;
      border-top: 2px solid $color-white;
    }
  }

  &.tui-blue-for-all-tile {
    &:after {
      content: 'FOR ALL';
      background: $color-blue-500;
    }
  }

  &.tui-blue-for-families-tile {
    &:after {
      content: 'FOR FAMILIES';
      background: $color-tui-blue-for-families;
    }
  }

  &.tui-blue-for-two-tile {
    &:after {
      content: 'FOR TWO';
      background: $color-tui-blue-for-two;
    }
  }

  @include breakpoint(sm) {
    width: 130px;

    img {
      width: 130px;
    }
  }
}

.tui-concept-squared {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: $margin-quintuple;
  width: $margin-quintuple;

  &.riu {
    width: 69px;
  }

  &.bluestar {
    width: 127px;

    .text {
      @include font-size(30);
    }
  }

  .pictogram {
    height: $margin-triple;
    width: $margin-triple;

    &-riu {
      width: 45px;
    }
  }
}

.tuiblue,
.tui-blue-for-families,
.tui-blue-for-two,
.tui-blue-for-all {
  background: $color-blue-500;
}

.splashworld {
  background-color: $color-splashworld;
}

.robinson {
  background-color: $color-robinson;
}

.suneoclub {
  background-color: $color-suneoclub;
  color: $color-suneoclub-text;
}

.tui-suneo {
  background: $color-tui-suneo;
}

.tuisensimar {
  background-color: $color-sensimar;
}

.riu {
  background-color: $color-riu;
}

.bluestar {
  background-color: $color-bluestar;
  color: $color-blue-500;
}

.tuimagiclife {
  background-color: $color-tui-magiclife;
  color: $color-tui-magiclife-text;
}

.tuisensatori {
  background-color: $color-sensatori;
}