$image-folder-path: 'https://www.tui.se/cdn/img/';
$example-image: 'https://images.ctfassets.net/kb4x8uh0bui6/5OdR3J0yVqUwm8UuEaCIyC/0f92b0d8a881f9b2b2ec3960edf92cd7/1440x605-0307762-tui-varmeguide-var-ar-det-varmt-just-nu.jpg?w=768&h=432&fit=thumb';
//These are only styles we need in the style guide rather than in the final style
@import 'layouts/base-styles/variables';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/forms';
@import 'bootstrap/bootstrap-overwrites';

@import 'partials/atoms/buttons/buttons';
@import 'partials/molecules/icon-usp/icon-usp';
@import 'partials/molecules/search-panel/search-panel';
@import 'partials/molecules/search-panel-modal/search-panel-modal';

.ninja {
  display: none;
}

html {
  overflow-y: scroll;
}

.sg-templates {
  .showcase {
    height: 200px;
    background-size: cover;
  }
}

%background-image {
  background: url($example-image) no-repeat top center;
  background-size: cover;
}

aside,
.sg-main-container {
  padding-top: $margin-double;
}

.container,
.row {
  background: inherit;
}

.index-container {
  border-radius: $border-radius-normal;
  border-bottom: 1px solid $color-grey;
  display: inline-block;
  margin: 0;
  padding: $margin-triple $margin-quadruple;
  background-color: $color-blue-300;
  color: $color-blue-500;
  text-align: center;
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translate(50%, -50%);

  &:hover,
  &:active,
  &:focus {
    text-decoration: none;
  }

  h1 {
    color: $color-blue-500;
    margin: 0 0 $margin-double;
    letter-spacing: .05em;
    display: block;

    .logo-tui {
      display: block;
      margin-bottom: $margin-normal;
    }
  }
}

.tui-logo {
  color: $color-red-400;
  margin-right: $margin-normal;

  &:before {
    vertical-align: -.1em;
  }
}

.showcase {
  @extend %flexbox-row;

  &.large {
    min-height: 120px;
  }

  &.svg {
    padding-top: $margin-half;
    font-size: 50px;
    justify-content: center;

    &.source {
      svg {
        opacity: .5;
      }
    }
  }

  .icon {
    min-height: 60px;
    background-position: 50% 50%;
  }
}

.showcase-name {
  padding: $margin-half;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.showcase-box {
  margin-bottom: $margin-double;

  &.three-colors {
    @extend %flexbox-row;
    justify-content: stretch;
    align-items: center;
  }

  .color-col {
    @extend %flexbox-row;
    justify-content: center;
    align-items: center;
    min-height: 119px;
  }

  .color-col-50 {
    width: 50%;
  }

  .color-col-25 {
    width: 25%;
  }
}

// pre code example
// -------------------------

/* stylelint-disable declaration-no-important */
.code {
  border-radius: 0 0 $border-radius-half $border-radius-half;
  margin-top: 0 !important;
}

/* stylelint-enable */

$example-border: $color-tui-grey-50;

.code[class*='language-'] {
  border: solid 1px $example-border;
  margin-bottom: $margin-double;
}

.module-library-block {
  .example {
    border-radius: $border-radius-normal $border-radius-normal 0 0;
    padding: $margin-double;
    border: 1px solid $example-border;
    border-bottom: 0;

    .container {
      width: 100%;
    }

    .icon-mobile-app {
      font-size: 45px;
      color: $color-blue-500;
    }
  }

  &.module-image .example {
    padding: 0;
  }

  .alert-crisis {
    margin-bottom: $line-height-computed;

    &.lightbox {
      margin: 0 0 $line-height-computed;
    }
  }

  .nav-bg-gradient {
    @extend %background-image;
    position: relative;
    color: $color-white;
    text-shadow: 0 1px 3px rgba($color-black, .5);
    padding: 1px $margin-normal;
    min-height: 300px;

    h3 {
      position: relative;
      z-index: 3;
    }
  }

  .cux-page-intro {
    margin: 0;
  }

  .box-card {
    position: relative;
  }

  .to-right {
    right: auto;
  }

  .tui-video-container {
    margin: $margin-normal 0;

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

  &.concept-logos {
    .tui-multi-column {
      columns: 200px 4;
    }
  }
}

// rainbow bootstrap fix
.tag.close {
  float: none;
  color: inherit;
  text-shadow: none;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  opacity: 1;
  cursor: default;
}

.navbar .icon-navigation {
  font-size: 4rem;
}

.switch-layout {
  cursor: pointer;

  .pictogram {
    height: 18px;
    width: 18px;
  }
}

.navbar-toggle {
  .pictogram {
    width: 48px;
    height: 48px;
  }
}

.example-bg-btn {
  display: inline-block;
  margin-right: $margin-normal;
  padding: $margin-normal $margin-half $margin-half $margin-normal;
  background-color: $color-blue-500;
}

.example-bg-btn-image {
  display: inline-block;
  margin-right: $margin-normal;
  padding: $margin-normal $margin-half $margin-half $margin-normal;
  @extend %background-image;
}

.example-bg-btn-empty {
  display: inline-block;
  margin-right: $margin-normal;
  padding: $margin-normal $margin-half $margin-half $margin-normal;
  background: transparent;
}

.example {
  .icon-sensatori {
    height: 200px;
    background-position: 50% 50%;
  }

  .container {
    width: 100%;
  }
}

.buttons-showcase {
  @extend %flexbox-row;
  flex-wrap: wrap;
  padding-bottom: $margin-double;
  padding-top: $margin-double;

  .btn {
    margin-right: $margin-normal;
    margin-bottom: $margin-normal;
  }
}

.btn-border {
  margin-right: $margin-normal;
  border-top: 1px solid $color-blue-300;
  margin-bottom: $margin-normal;
}

.links-showcase {
  @extend %flexbox-row;
  flex-wrap: wrap;
  margin-right: $margin-double;

  label {
    margin-right: $margin-double;
  }
}

.webclips img {
  display: inline-block;
}

//start page specific
.flag-links {
  a {
    outline: 0;
    text-decoration: none;

    h3:hover {
      color: $color-link-blue;
    }
  }

  .inactive {
    color: $color-grey;
  }
}

.preview-page {
  body {
    @include breakpoint(sm) {
      padding-top: $margin-quadruple;
    }
  }

  .switch-layout {
    display: none;
  }
}

.tui-shapes {
  svg,
  img {
    max-height: 36px;
  }
}

.link-block {
  a {
    margin-bottom: 5px;
  }
}

.font-family-row {
  margin-bottom: 30px;
}

.font-family {
  @include font-size(60);
  margin: 0;
}

footer {
  margin-top: 20px;
}

.concept-logo {
  background-image: image-url('concept-logo-sprite/v1/concept-logo-sprite.svg');
}

.sg-color {
  box-shadow: $box-shadow-card;
}

.concept-color {
  height: 120px;
  border-radius: $border-radius-normal $border-radius-normal 0 0;

  &.gradient-container {
    display: flex;
  }
}

.gradient-color {
  height: 120px;
  width: 67%;
}

.solid-color {
  width: 33%;
  height: 120px;
  display: flex;
  flex-flow: column;

  > div {
    height: 60px;
  }
}

.concept-color-name {
  background: $color-white;
  padding: $margin-half;
  border-radius: 0 0 $border-radius-normal $border-radius-normal;
}

.style-guide-info {
  margin: $margin-double 0 $margin-triple;
  border-radius: 0 4px 4px 0;
  padding: $margin-normal $margin-double 0;
  border-width: 1px;
  border-style: solid;
  border-left-width: 5px;

  &.info {
    border-color: rgba($color-blue-500, .7);
  }

  &.warning {
    border-color: rgba($color-red-400, .7);
  }
}

// demo-grid
.demo-grid {
  .row {
    margin-bottom: $margin-normal;
  }

  [class*='col-'] {
    > div {
      @extend %flexbox-row;
      align-items: center;
      justify-content: center;
      padding-top: $margin-normal;
      padding-bottom: $margin-normal;
      border: 1px solid rgba($color-blue-300, .8);
      background-color: $color-blue-200;
    }
  }
}

.transparency-example {
  margin-right: $margin-double;
  background-image: image-url('styleGuide/transparency-bg-exemple.png');

  > div {
    padding: $margin-normal;
  }
}

.transparency-example,
.transparency-example [class*='transparent-'] {
  display: inline-block;
  width: 100%;
  height: 125px;
}

.transparency-example:not(:last-child) {
  margin-bottom: $margin-normal;
}

.toggle-color {
  display: inline-block;
  padding: $margin-half;
  border-radius: 4px;
  cursor: pointer;
}

.text-color-box {
  background: $text-color;
  color: $color-white;
}

.tui-blue-box {
  background: $color-blue-300;
}

.tui-dark-blue-box {
  background: $color-blue-500;
  color: $color-white;
}

.gradient {
  p,
  h3 {
    padding-left: $margin-normal;
  }
}

.loaders {
  img {
    display: block;
    margin-bottom: $margin-double;
  }
}

.alert-danger.lightbox {
  margin-bottom: $line-height-computed;
}

input {
  &.focus {
    border-color: $link-color;
    outline: 0;
  }
}

.news-label-example-box {
  position: relative;
  border: 1px solid $color-grey;
  height: 100px;
  width: 250px;
  margin-bottom: $margin-double;
}

.background-image-dummy {
  @extend %background-image;
  padding: $margin-quadruple $margin-normal;
}

.toggle {
  .full {
    display: none;
  }

  &.more {
    .intro {
      display: none;
    }

    .full {
      display: block;
    }
  }
}

.sg-main-container {
  clear: none;

  .container {
    width: 100%;

    @include breakpoint(sm) {
      max-width: 740px;
    }

    @include breakpoint(md) {
      max-width: 960px;
    }

    @include breakpoint(lg) {
      max-width: 1160px;
    }
  }

  .tui-navigation-background {
    margin-bottom: 0;
  }

  .sg-excursion-heading {
    margin: $margin-triple 0 $margin-double;
  }
}

.tui-content-box-list {
  margin-top: $margin-quadruple;
}

.background-image-dummy .box-card,
.image-in-text-example .tui-text-in-image {
  margin-bottom: $margin-double;
}

.styleguide-icon-usp {
  .tui-container {
    width: 100%;
    padding-left: $margin-double;
    padding-right: $margin-double;
  }
}

.sg-locations-cards {
  padding: $margin-normal;
}

.showcase.svg .pictogram,
.country-flag {
  width: 1.5em;
  height: 1.5em;
}

.showcase.svg .icon-superlativ .pictogram {
  width: 1em;
  height: 1em;
}

.tickets-sg-container {
  .tickets {
    margin-top: 0;
  }
}

.sg-accordions {
  .tui-hotel-concept {
    display: none;
  }

  .sg-acccordions-heading {
    margin: $margin-double 0 $margin-normal;
  }
}

// New style guide
.style-guide-menu-trigger {
  border-radius: 0 4px 4px 0;
  background: $color-blue-300;
  color: $color-white;
  padding: $margin-normal;
  width: 48px;
}

.top-area {
  grid-area: toparea;
}

.sidebar-area {
  grid-area: sidebararea;
  background: $color-blue-300;
  padding: $margin-double;
  display: flex;
  flex-direction: column;

  a {
    color: $color-white;
    font-weight: bold;
  }

  .pictogram-tui-smile {
    align-self: center;
    width: 44px;
    height: 35px;
    margin-bottom: $margin-normal;
  }

  .tui-style-guide-heading {
    color: $color-white;
    align-self: center;
    margin-bottom: $margin-quadruple;
  }
}

.main-area {
  grid-area: mainarea;
  margin: unset;
  padding: $margin-triple $margin-half;

  @include breakpoint(sm) {
    padding: 0;
  }
}

.tui-style-guide {
  display: grid;
  grid-gap: 0;
  grid-template-rows: 48px auto;
  grid-template-columns: 0 auto;
  grid-template-areas: 'sidebararea toparea' 'sidebararea mainarea';

  &.sidebar-open {
    grid-template-columns: 240px auto;
  }

  @include breakpoint(sm) {
    .product-header {
      padding-top: $margin-triple;
    }
  }
}

.color-heading {
  @include font-size(14);
  font-weight: bold;
  color: $color-white;
  background: $color-blue-400;
  border-radius: $border-radius-normal;
  padding: 3px $margin-half;
}

.button-heading {
  @include font-size(14);
  font-weight: bold;
  color: $color-white;
  background: $color-blue-400;
  border-radius: $border-radius-normal;
  padding: $margin-quarter $margin-half;
  display: inline-block;
}

.tui-style-guide-nav {
  h5 {
    text-transform: uppercase;
    opacity: .6;
  }

  .sidebar-main-header {
    padding-bottom: $margin-normal;
    border-bottom: 1px solid $color-white;
    opacity: 1;
    margin-bottom: $margin-double;
  }

  a {
    text-transform: capitalize;
  }

  .active {
    color: #fa1119;
    text-decoration: underline;
    font-weight: bold;
  }

  ul {
    list-style-type: none;
    padding-left: 0;
    margin-top: 0;
  }

  li {
    display: inline-block;
    padding: $margin-half;

    @include breakpoint(sm) {
      display: list-item;
      padding: 0;
    }
  }
}

.sg-section {
  padding-top: $margin-double;
  padding-bottom: $margin-double;
}

.sg-container {
  display: grid;
  grid-gap: $margin-normal;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

.sg-item {
  min-width: 0;
  min-height: 0;

  &.icon {
    border-bottom: 1px solid $color-grey;
  }

  &.border {
    border-top: 1px solid #70cbf4;
    margin-bottom: 12px;
  }

  .label-icon {
    display: inline-block;
    margin-bottom: $margin-half;
  }
}

.sg-grid {
  display: grid;
  grid-gap: $margin-normal;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));

  &.sg-container {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  &.sg-logo {
    grid-template-columns: repeat(4, 1fr);
  }

  &.responsive {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  }
}

.sg-grid > div {
  border: 0;
}

.forminput {
  display: flex;
  flex-direction: column;
}

.concept-logo-container {
  > div:not(:first-child) {
    margin-left: $margin-double;
  }

  .tui-concept-logo-box {
    height: $margin-sextuple;
  }
}