@import "src/scss/base/_variables.scss";
@import "node_modules/bootstrap/scss/mixins/_breakpoints.scss";

.logo-eu {
  img {
    display: none
  }

  .contrast-normal {
    display: block
  }
}

.black-yellow, .black-white, .yellow-black {
  .logo-eu {
    img {
      display: none
    }
  }
}

.black-yellow {
  .logo-eu {
    img.contrast-black-yellow {
      display: block
    }
  }
}

.black-white {
  .logo-eu {
    img.contrast-black-white {
      display: block
    }
  }
}

.yellow-black {
  .logo-eu {
    img.contrast-yellow-black {
      display: block
    }
  }
}

.expandable-menu {
  @include media-breakpoint-down(lg) {
    display: none
  }
}

.expanded-section {
  @include media-breakpoint-up(lg) {
    display: none
  }
}

.dropdown-menu {
  padding: 0;
  margin-top: 8px;
  &.black-white {
    background-color: black;
    border: 1px solid white;

    .dropdown-item {
      color: white;
      &:hover {
        color: black;
      }
      &.active {
        color: black;
      }
    }
  }
  &.black-yellow {
    background-color: black;
    border: 1px solid $color-yellow;
    .dropdown-item {
      color: $color-yellow;
      &:hover {
        color: black;
      }
      &.active {
        color: black;
      }
    }
  }
  &.yellow-black {
    background-color: $color-yellow;
    border: 1px solid black;
    .dropdown-item {
      color: black;
      &:hover {
        color: $color-yellow;
      }
      &.active {
        color: $color-yellow;
      }
    }
  }
}

.dropdown:hover .dropdown-menu {
  display: block;
  right: 0;
  left: auto;
  margin-top: 0;
}

.dropdown-item {
  padding: 5px 16px;
  font-size: 1.125rem;
  &:hover {
    text-decoration: none;
    cursor: pointer;
    &.active {
      color: white;
    }
  }
  &.active {
    background-color: $primary;
  }
}

.dropdown-menu-toggle {
  width: 20px;
  height: 15px;
  margin-left: 5px;
  fill: black;
}

.dropdown-button {
  display: inline-flex !important;
}
