.btn {
  font-weight: 400;
  text-decoration-line: none;

  [class^='icon-'],
  [class*=' icon-'] {
    line-height: 1.5;
  }

  &:focus {
    outline: auto;
  }

  &:hover {
    box-shadow: $boxshadow;
  }
}

.btn-primary {
  background: $blue;
  border-color: $blue;
  font-size: $font-size-small;
  text-transform: uppercase;
  font-weight: 600;

  &:hover {
    background: $innovationblue-dark;
    box-shadow: $boxshadow;
  }

  &:disabled {
    background: $blue;
    border-color: $blue;
    opacity: 0.7;
    box-shadow: none;
  }

  &.btn-cta {
    padding: 0.5rem 1rem;
    text-decoration: none;
    margin-bottom: 2rem;
    margin-top: 2rem;
  }
}

.btn-secondary {
  text-transform: uppercase;
  background: $offwhite;
  color: $mediumgrey;
  font-size: $font-size-small;
  border: 1px solid $offwhite;
  border-radius: 0.25rem;
  font-weight: 600;

  &:focus,
  &:active {
    background: $offwhite;
    color: $mediumgrey;
    box-shadow: none;
    border: 1px solid $offwhite;
  }

  &:hover {
    background: $offwhite;
    color: $blue;
    box-shadow: $boxshadow;
    border: 1px solid $offwhite;
  }

  &:disabled {
    background: $offwhite;
    border: 1px solid $offwhite;
    color: $mediumgrey;
    opacity: 0.7;
    box-shadow: none;
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    background: $offwhite;
    color: $mediumgrey;
    box-shadow: none;

    &:hover {
      color: $blue;
      box-shadow: $boxshadow;
    }
  }

  &.like-button,
  &.pin-button {
    &.active,
    &:not(:disabled):not(.disabled).active {
      color: $white;
      background-color: $red;
      border-color: $red;
    }
  }

  .icon-heart {
    font-size: $font-size-medium;
  }

  .icon-link {
    font-size: 0.5rem;
  }
}

.btn-success {
  background-color: $green;
  border-color: $green;
  font-size: $font-size-small;
  text-transform: uppercase;
  font-weight: 600;

  &:hover {
    background-color: $green;
  }
}

.btn-link {
  color: $blue;

  &:hover {
    box-shadow: none;
  }

  &.multilingual-dropdown {
    padding: 0;
    color: $black;
    text-decoration: underline;

    &::after {
      @extend %icon-font;

      content: '\e93e';
      border: none;
      margin-left: 0.25rem;
      transform: scale(1.5);
    }
  }
}

// Expected ".btn-outline-primary:hover" to come before
// @at-root  ".btn-outline-primary:hover:not([disabled])"
.btn-outline-primary {
  border-color: $blue;
  color: $blue;
  font-size: $font-size-small;
  text-transform: uppercase;
  font-weight: 600;

  &:hover {
    box-shadow: none;
  }

  &:hover:not([disabled]) {
    background-color: $blue;
    border-color: $blue;
  }

  &.disabled {
    color: $grey;
    border-color: $grey;
  }
}

.btn-outline-secondary {
  border: 1px solid $mediumgrey;
  color: $black;
  transition: $standard-transition;
  font-weight: 700;
  padding: 0.5em 0.75em;

  &:hover,
  &:focus {
    border-color: $innovationblue-dark;
    background: $blue-20;
    color: $innovationblue-dark;
    transition: $standard-transition;
    box-shadow: none;
  }
}

.btn-danger {
  font-size: $font-size-small;
  text-transform: uppercase;
  font-weight: 600;
}

.btn-light {
  background: $white;
  border: 0;
  color: $mediumgrey;
  font-size: $font-size-small;
  padding: 0.5rem 1rem;
  text-decoration: none;

  &:hover {
    background: $white;
  }
}

.btn-light-flat {
  background: $white;
  border: 0;
  color: $black;
  font-size: $font-size-small;
  text-decoration: none;
  transition: $standard-transition;

  &.button-icon-only {
    height: 1.5rem;
    width: 1.5rem;
    font-size: 1.1rem;
  }

  &.icon-clear,
  &.icon-filter {
    font-size: $font-size-large;
  }

  &:hover {
    box-shadow: none;
    transition: $standard-transition;
    color: $innovationblue;
  }
}

.btn-overlay {
  background-color: rgb(0 0 0 / 70%);
  border: 0;
  border-radius: $border-radius-small;
  color: $white;
  position: relative;
  font-weight: 600;

  span {
    position: relative;
    z-index: 10;
  }

  &:hover {
    background-color: rgb(0 0 0 / 70%);
    color: $white;
  }

  &::after {
    content: '';
    background: rgb(0 0 0 / 70%);
    border-radius: $border-radius-small;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}

.button-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  &::before {
    display: inline-block;
  }
}

.btn-outline-light {
  border: 1px solid $paper;
  background: $white;
  color: $mediumgrey;
  font-size: $font-size-small;

  &:hover {
    box-shadow: $boxshadow;
    background: $white;
    color: $mediumgrey;
  }

  &.add-button,
  &.like-button,
  &.pin-button,
  &.recommendation-button,
  &.move-button {
    font-size: $font-size-large;

    &.button-icon-only {
      height: 2.25rem;
      width: 2.25rem;
    }
  }

  &.like-button,
  &.pin-button {
    &.active,
    &:not(:disabled):not(.disabled).active {
      color: $white;
      background-color: $red;
      border-color: $red;
    }
  }

  &.like-button {
    font-size: $font-size-medium;
  }

  &.pin-button,
  &.recommendation-button {
    &:hover {
      color: $innovationblue;
      background: $white;
      border-color: $white;
    }
  }
}

.btn-outline-overlay {
  border: 1px solid $white;
  color: $white;
  transition: $standard-transition;

  &:hover,
  &:focus {
    border-color: $innovationblue;
    color: $innovationblue;
    transition: $standard-transition;
  }
}

a {
  &.skip-main {
    left: -999px;
    position: absolute;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -999;
  }

  &.skip-main:focus,
  &.skip-main:active {
    color: $white;
    background-color: $black;
    left: auto;
    top: 70px;
    width: 30%;
    height: auto;
    overflow: auto;
    margin: 10px 35%;
    padding: 0.5rem;
    border-radius: 1rem;
    border: 4px solid $yellow;
    text-align: center;
    font-size: 1.2rem;
    z-index: 999;

    @media (min-width: $bp-xxxl) {
      top: 4.375vw;
    }
  }
}

.nav-link,
.extended-toggle {
  position: relative;

  &:hover {
    text-decoration: none;
  }
}

.page-link {
  color: $black;
  text-decoration: none;

  &:hover {
    color: $black;
  }
}

.page-item.active .page-link {
  background-color: $darkblue;
  border-color: $darkblue;
}

.info-panel,
.header-card {
  .btn-link {
    color: $blue;
    text-decoration: none;
    font-size: 1rem;

    &:hover {
      text-decoration: none;
    }
  }
}

.share-button + .download-button {
  margin-left: 0.5rem;
}