@import 'settings';

:root {
  --primary-color: #{$brand-primary};

  --secondary-color: #{$brand-secondary};

  --accent-color: #{$brand-accent};
  --accent-color--text: #{$brand-accent-text};

  --link-color: #{$brand-link};

  //--navbar-default-link-color: #{$navbar-default-link-color};
  //--navbar-default-link-active-color: #{$navbar-default-link-active-color};
  //--navbar-default-link-active-bg: #{$navbar-default-link-active-bg};
  //
  //--navbar-default-bg: #{$navbar-default-bg};
}

[type="radio"]:checked + label:before {
  border-color: $brand-primary;
}

[type="radio"]:focus + label:before {
  box-shadow: 0 0 3px 2px $brand-primary;
}

[type="checkbox"]:checked + label:after,
[type="radio"]:checked + label:after {
  border-color: $brand-primary;
  background-color: $brand-primary;
}

[type="checkbox"]:checked:not(:disabled) + label,
[type="radio"]:checked:not(:disabled) + label {
  color: $brand-primary;
  fill: $brand-primary;
}

.tabs-left .nav-tabs > li.active > a,
.tabs-left .nav-tabs > li.active > a:hover,
.tabs-left .nav-tabs > li.active > a:focus {
  border-right-color: $brand-primary;
}

.view-birthday .teaser--tile .teaser__image {
  background-color: $brand-primary;
}

.cover,
.cover.search-grid--hero,
.read-indicator,
.select2-container--social .select2-results__option--highlighted[aria-selected],
.select2-container--social .select2-results__option[aria-selected=true],
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
  background-color: $brand-primary;
}

.hero-form[role='search'] {

  .form-control {
    &:focus,
    &:active,
    &:focus ~ .search-icon,
    &:active ~ .search-icon {
      box-shadow: 0 2px 0 0 $brand-secondary;
    }
  }
}

.search-grid--hero .form-wrapper {
  .btn-group {
    &:before {
      background: $brand-primary;
    }

    .dropdown-toggle .caret {
      border-bottom-color: $brand-primary;
      border-top-color: $brand-primary;
    }

    .form-submit {
      color: $brand-primary;
    }
  }
}

.form-control:focus {
  border-color: $brand-primary;
  box-shadow: 0 2px 0 0 $brand-primary;
}

.select2-container--social.select2-container--focus .select2-selection, .select2-container--social.select2-container--open .select2-selection, .select2-container--social .select2-dropdown {
  border-color: $brand-primary;
}

.site-footer,
.badge-secondary,
.stream-icon-new {
  background-color: $brand-secondary;
}

.eu-cookie-compliance-secondary-button,
.btn-primary {
  background-color: $brand-primary;
  border-color: $brand-primary;

  &:focus,
  &.focus,
  &:hover,
  &:active,
  &.active,
  .open > &.dropdown-toggle,
  &.dropdown-toggle:hover {
    background-color: $brand-primary;
    border-color: $brand-primary;
    background-image: linear-gradient(to bottom, rgba(black, 0.2) 0%, rgba(black, 0.2) 100%);
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus,
    &.focus {
      background-color: $brand-primary;
      border-color: $brand-primary;
      background-image: linear-gradient(to bottom, rgba(black, 0.2) 0%, rgba(black, 0.2) 100%);
    }
  }

}

.btn-secondary {
  background-color: $brand-secondary;
  border-color: $brand-secondary;

  &:focus,
  &.focus,
  &:hover,
  &:active,
  &.active,
  .open > &.dropdown-toggle,
  &.dropdown-toggle:hover {
    background-color: $brand-secondary;
    border-color: $brand-secondary;
    background-image: linear-gradient(to bottom, rgba(black, 0.2) 0%, rgba(black, 0.2) 100%);
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus,
    &.focus {
      background-color: $brand-secondary;
      border-color: $brand-secondary;
      background-image: linear-gradient(to bottom, rgba(black, 0.2) 0%, rgba(black, 0.2) 100%);
    }
  }

}

.badge-accent {
  color: $brand-accent-text;
  background-color: $brand-accent;
  border-color: $brand-accent;
}

.btn-accent {
  color: $brand-accent-text;
  background-color: $brand-accent;
  border-color: $brand-accent;

  &:focus,
  &.focus,
  &:hover,
  &:active,
  &.active,
  .open > &.dropdown-toggle,
  &.dropdown-toggle:hover {
    color: $brand-accent-text;
    background-color: $brand-accent;
    border-color: $brand-accent;
    background-image: linear-gradient(to bottom, rgba(black, 0.2) 0%, rgba(black, 0.2) 100%);
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus,
    &.focus {
      color: $brand-accent-text;
      background-color: $brand-accent;
      border-color: $brand-accent;
      background-image: linear-gradient(to bottom, rgba(black, 0.2) 0%, rgba(black, 0.2) 100%);
    }
  }

}


.card__link,
.card__link .btn-default,
.card__link.btn-default {
  border-color: $brand-primary;
}

.btn-flat,
.btn-link,
.btn-link:hover,
.btn-flat:hover,
.btn-link:focus,
.btn-flat:focus,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > button,
.nav-tabs > li.active > button:hover,
.nav-tabs > li.active > button:focus,
.card__link,
.card__link:focus,
.card__link:hover,
.view--who-liked .views-field-view-user a,
.comment__reply-btn,
.nav-book .menu-item--active-trail > a {
  color: $brand-primary;
  fill: $brand-primary;
}

.list-item--active,
.list-item--active:hover,
.list-item--active:focus,
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: $brand-secondary;
  border-color: $brand-secondary;
}

.field--name-field-introduction-text,
.field--name-field-featured-items-description,
.field--name-field-featured-description,
.field--name-field-accord-description,
.field--name-field-accord-item-description,
.field--name-field-phase-description,
.quiz-form__text,
.scorm-form--body,
.body-text,
.paragraph--type--image-text .field--name-field-text,
.paragraph--type--text-image .field--name-field-text,
.paragraph--type--text .field--name-field-text,
.course-full .card__body,
.teaser--course,
.block--intro-text .block--intro-text__content,
.block-inline-blockkpi-analytics  .field--name-body,
.basic-block .field--name-field-text-block,
.hero--dashboard .field--name-field-text-block,
.certificate-footer .bottom,
.certificate-header .description {
  *:not(.badge):not(.section__title) > a:not(.btn) {
    &:hover,
    &:focus {
      color: $brand-link;
    }
  }
}

.comment__text p {
  a:not(.btn) {
    &:hover,
    &:focus {
      color: $brand-link;
    }
  }
}

blockquote {
  border-left-color: $brand-primary;
}

.input-group .form-control:focus ~ .input-group-addon {
  border-color: $brand-primary;
  box-shadow: 0 2px 0 0 $brand-primary;
}

#skip-link a {
  background-color: $navbar-default-link-active-bg;
  color: $navbar-default-link-active-color;
}

.navbar-secondary {
  color: #f9f9f9;
  background-color: #1f7ea7;

  .navbar-nav {

    a, button {
      color: #f9f9f9;
    }

    li.active a, li.active button {
      border-bottom-color: #f9f9f9;
    }

  }
}

.navbar-scrollable:before {
  background: linear-gradient(90deg, #1f7ea7, transparent);
}

.navbar-scrollable:after {
  background: linear-gradient(-90deg, #1f7ea7, transparent);
}

.navbar-default {
  background-color: $navbar-default-bg;

  .navbar-toggle {
    color: $navbar-default-link-color;

    &:hover,
    &:focus {
      color: $navbar-default-link-active-color;
      background-color: $navbar-default-link-active-bg;
    }
  }

  &.navbar-second-line {
    background-color: $second-line-navbar-bg;

    .navbar-nav {
      > li > a,
      > li > button {
        color: $second-line-navbar-text;
        fill: $second-line-navbar-text;

        &:hover,
        &:focus {
          color: $second-line-navbar-active-text;
          background-color: $second-line-navbar-active-bg;

          .navbar-nav__icon {
            fill: $second-line-navbar-active-text;
          }
        }
      }

      > .open > a,
      > .open > button {
        &,
        &:hover,
        &:focus {
          background-color: $second-line-navbar-active-bg;
          color: $second-line-navbar-active-text;
        }
      }

      > li > a.is-active,
      > li > button.is-active,
      > .active > a,
      > .active > button {
        &,
        &:hover,
        &:focus {
          color: $second-line-navbar-active-text;
          fill: $second-line-navbar-active-text;
          background-color: $second-line-navbar-active-bg;
        }
      }

      li > ul > li.expanded {
        > .dropdown-menu {
          @include for-tablet-landscape-down {
            background-color: $second-line-navbar-active-bg;

            > li {
              &:focus,
              &:hover,
              &.active {
                background: $second-line-navbar-bg;
              }
            }
          }
        }
      }

      > .dropdown > .dropdown-menu {
        background-color: $second-line-navbar-active-bg;

        a {
          color: $second-line-navbar-active-text;
        }
      }
    }

    .navbar-nav__icon {
      fill: $second-line-navbar-text;
    }
  }
}

.header-top {
  background-color: $navbar-default-bg;
}

.navbar-default,
.header-top {
  .navbar-nav {
    > li > a,
    > li > button {
      color: $navbar-default-link-color;
      fill: $navbar-default-link-color;

      &:hover,
      &:focus {
        color: $navbar-default-link-active-color;
        background-color: $navbar-default-link-active-bg;

        .navbar-nav__icon {
          fill: $navbar-default-link-active-color;
        }
      }
    }

    > .open > a,
    > .open > button {
      &,
      &:hover,
      &:focus {
        background-color: $navbar-default-link-active-bg;
        color: $navbar-default-link-active-color;
      }
    }

    > li > a.is-active,
    > li > button.is-active,
    > .active > a,
    > .active > button {
      &,
      &:hover,
      &:focus {
        color: $navbar-default-link-active-color;
        fill: $navbar-default-link-active-color;
        background-color: $navbar-default-link-active-bg;
      }
    }

    li > ul > li.expanded {
      > .dropdown-menu {
        @include for-tablet-landscape-down {
          background-color: $navbar-default-link-active-bg;

          > li {
            &:focus,
            &:hover,
            &.active {
              background: $navbar-default-bg;
            }
          }
        }
      }
    }
  }
}

.navbar-second-line + main {
  .search-take-over {
    .form-text,
    svg {
      color: $second-line-navbar-text;
      fill: $second-line-navbar-text;
    }

    .form-text {
      &::-webkit-input-placeholder {
        color: $second-line-navbar-text !important;
      }

      &::-moz-placeholder {
        color: $second-line-navbar-text !important;
      }
      &:-ms-input-placeholder {
        color: $second-line-navbar-text !important;
      }
      &:-moz-placeholder {
        color: $second-line-navbar-text !important;
      }

      &:focus {
        border-color: $second-line-navbar-text;
        box-shadow: 0 2px 0 0 $second-line-navbar-text;
      }
    }
  }

  .search--with-suggestions .spinner > div {
    background-color: $second-line-navbar-text;
  }
}

html:not(.js) .navbar-default {
  .dropdown {

    &:focus,
    &:hover {

      > a,
      > button {
        color: $navbar-default-link-active-color;
        background-color: $navbar-default-link-active-bg;

        .navbar-nav__icon {
          fill: $navbar-default-link-active-color;
        }
      }
    }
  }
}

.dropdown {
  @include for-phone-only {
    &.has-alert > a:before {
      color: $brand-accent-text;
      background-color: $brand-accent;
    }
  }

  // There are now items that don't have their own top level icon so these
  // should show notifications in the user menu also on desktop.
  &.has-alert.has-alert--desktop > a:before {
    color: $brand-accent-text;
    background-color: $brand-accent;
  }
}

@include for-tablet-landscape-down {

  .navbar-collapse .dropdown-menu {
    li {
      a,
      span:not(.caret) {
        color: $navbar-default-link-color;

        &:hover,
        &:focus {
          color: $navbar-default-link-active-color;
          background-color: $navbar-default-link-active-bg;
        }
      }
    }

    &.navbar-second-line {
      background-color: $second-line-navbar-bg;

      li {
        a,
        span:not(.caret) {
          &:hover,
          &:focus {
            color: $second-line-navbar-active-text;
            background-color: $second-line-navbar-active-bg;
          }
        }
      }
    }
  }
}

// Placeholder color for the search overlay form.
.search-take-over {
  .form-control {
    // Placeholder chrome
    &::placeholder {
      color: $navbar-default-link-color !important;
    }

    // Placeholder Firefox
    &::-moz-placeholder {
      color: $navbar-default-link-color !important;
      opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
    }

    // Placeholder Internet Explorer 10-11
    :-ms-input-placeholder {
      color: $navbar-default-link-color !important;
    }

    // Placeholder Microsoft Edge
    ::-ms-input-placeholder {
      color: $navbar-default-link-color !important;
    }
  }
}


.navbar-nav__icon {
  fill: $navbar-default-link-color;
}

.navbar__open-search-block {
  background-color: $navbar-default-bg;

  .navbar-second-line & {
    background-color: $second-line-navbar-bg;
  }
}

.search--with-suggestions .spinner > div {
  background-color: $navbar-default-color;
}

@include for-tablet-landscape-up {

  .search-take-over .form-text {
    color: $navbar-default-link-color;

    &:focus {
      border-color: $navbar-default-link-color;
      box-shadow: 0 2px 0 0 $navbar-default-link-color;
    }

  }

  .btn--close-search-take-over svg,
  .search-take-over svg {
    fill: $navbar-default-link-color;
  }

}

.form-item-data-policy {
  .card__block & {
    label {
      a {
        color: $link-color;
      }
    }
  }
}

.vote-widget--social-vote .vote-vote {
  color: $brand-accent-text;
  background-color: $brand-accent;
}

.social-gtranslate-list--mobile {
  background-color: $navbar-default-bg;
  fill: $navbar-default-link-color;

  &:hover,
  &:focus,
  &.open {
    fill: $navbar-default-link-active-color;
    background-color: $navbar-default-link-active-bg;
  }
}

.social-gtranslate-list--desktop {
  background-color: $navbar-default-bg;

  > a {
    color: $navbar-default-link-color;
    background-color: $navbar-default-bg;
    .select-icon {
      fill: $navbar-default-link-color;
    }

    &:focus,
    &:hover {
      color: $navbar-default-link-active-color;
      fill: $navbar-default-link-active-color;
      background-color: $navbar-default-link-active-bg;
      .select-icon {
        fill: $navbar-default-link-active-color;
      }
    }
  }

  &.open {
    > a {
      color: $navbar-default-link-active-color;
      fill: $navbar-default-link-active-color;
      background-color: $navbar-default-link-active-bg;
      .select-icon {
        fill: $navbar-default-link-active-color;
      }
      &:focus,
      &:hover {
        color: $navbar-default-link-active-color;
        fill: $navbar-default-link-active-color;
        background-color: $navbar-default-link-active-bg;
        .select-icon {
          fill: $navbar-default-link-active-color;
        }
      }
    }
  }

  .navbar-second-line & {
    > a {
      color: $second-line-navbar-text;
      background-color: $second-line-navbar-bg;
      &:after {
        color: $second-line-navbar-text;
      }
      .select-icon {
        fill: $second-line-navbar-text;
      }
      &:focus,
      &:hover {
        color: $second-line-navbar-active-text;
        fill: $second-line-navbar-active-text;
        background-color: $second-line-navbar-active-bg;
        &:after {
          color: $second-line-navbar-active-text;
        }
        .select-icon {
          fill: $second-line-navbar-active-text;
        }
      }
    }
  }
}

.marker-cluster,
.marker-cluster-small {
  &:after {
    background: $brand-secondary;
  }

  div {
    &:after {
      background: $brand-secondary;
    }
  }
}

.leaflet-popup-content .card__text {
  > a {
    color: $link-color;
    &:after {
      color: $link-color;
    }
  }
}

.card__featured-items .teaser__info {
  svg {
    color: $brand-primary;
    fill: $brand-primary;

    &:hover,
    &:focus,
    &:active {
      color: $brand-accent;
      fill: $brand-accent;
    }
  }
}

.course__navigation {
  .course_nav-title,
  .course_nav-toggle,
  .course_dividing-line {
    color: $brand-primary;
  }

  .course_nav-title {
    .icon {
      background: $brand-primary;
    }

    &:hover,
    &:active,
    &:focus {
      color: $brand-accent;

      .icon {
        background: $brand-accent;
      }
    }
  }

  .course_nav-toggle {
    svg {
      fill: $brand-primary;
    }

    &:hover,
    &:active,
    &:focus {
      color: $brand-accent;

      svg {
        fill: $brand-accent;
      }
    }
  }
}

.badge.badge-primary,
.node--unpublished__label {
   background-color: $brand-primary;
}

.badge.badge-active {
  color: $brand-accent-text;
  background-color: $brand-accent;
}

.phase {
  &.phase-past {
    &:not(:last-child):before {
      color: $brand-accent-text;
      background-color: $brand-accent;
    }

    .phase-past--icon .checkmark-icon {
      fill: $brand-accent;
    }
  }

  &.phase-active {
    &:before {
      color: $brand-accent-text;
      background-color: $brand-accent;
    }
  }

  .teaser__tag {
    color: $brand-primary;

    a {
      &:hover,
      &:active,
      &:focus {
        color: $brand-accent;
      }
    }
  }

  &.path-group {
    .cover-wrap {
      .teaser__tag {
        background-color: $brand-primary;
        color: #fff;
      }
    }
  }

  .badge-primary {
    background: $brand-primary;
  }

  .hero__banner-static {
    .hero__tag {
      color: $brand-primary;

      a,
      span {
        color: $brand-primary;
      }

      a {
        &:hover,
        &:active,
        &:focus {
          color: $brand-accent;
        }
      }
    }
  }

  .navbar-secondary {
    .navbar-nav {
      .hidden-list {
        li a {
          &:hover,
          &.active,
          &:focus,
          &.is-active {
            color: $brand-primary;
          }
        }
      }
    }
  }
}

.teaser--tile.teaser-profile {
  .teaser__image {
    background-color: $brand-primary;
  }
}

.email-preview {
  .btn-link-bg {
    background: $brand-primary;
  }

  .btn-link {
    border-color: $brand-primary;
    color: $brand-primary;
  }

  .main {
    a:not(.btn-link) {
      color: $brand-primary;
    }
  }
}

.block-data-policy .card__title {
  background: $brand-secondary;
}

.social__dialog-badge.social__certificate {
  .social__certificate--no-bg {
    .social__certificate--content .footer a {
      color: $brand-primary;

      .icon {
        fill: $brand-primary;
      }
    }
  }
}

.back-link {
  color: $brand-primary;
  fill: $brand-primary;

  &:hover,
  &:focus {
    color: $brand-secondary;
    fill: $brand-secondary;
  }
}

.poll-current-result {
  .choice-result {
    .bar {
      border-color: $brand-primary;

      .foreground {
        background: $brand-primary;
      }
    }
  }
}

.addtocal-list li .calendar-link a {
  color: $brand-primary;
}

.profile-preview-link:hover:before {
  border-color: $brand-primary;
}

// Upload file widget on the media library.
body.media-directory {
  .dropzone {
    .dz-message,
    .dz-preview:not(.dz-error) {
      border-color: $brand-primary;
    }
  }

  .dz-preview {
    .dz-progress {
      .dz-upload {
        background: $brand-primary;
      }
    }
  }
}

// CKEditor5 overrides
.ck.ck-content {

  // Link style
  a:not(.btn) {
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: $brand-link;

    &:hover,
    &:focus {
      color: $brand-link;
      cursor: pointer;
    }
  }

  // Blockquote
  blockquote {
    border-left-color: $brand-primary;
  }
}

.files-list .active-highlighted:before {
  border-color: $brand-primary;
}

// AI chatbot
.ai-deepchat--header,
.ai-deepchat--header:hover,
.ai-deepchat--header.active {
  background-color: $navbar-default-bg;
}
