@import '../override-function';

.va-dropdown {
  position: relative;

  // This should always be a button element
  &-trigger {
    background: transparent url('#{$formation-image-path}/arrow-down-white.svg') no-repeat;
    background-position: right 8px center;
    background-size: 10px 10px;
    border-radius: 0;
    border-top: 3px solid transparent;
    margin: 0;
    padding: 9px 25px 8px 8px;

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

    &[aria-expanded=true] {
      border-top-color: $color-va-accent;
      background-color: $color-white;
      background-image: url('#{$formation-image-path}/arrow-up.svg') !important;
      color: $color-base;

      path {
        fill: currentColor;
      }
    }
  }

  &-panel {
    background: $color-white;
    box-shadow: 0px 4px 10px -4px $color-base;
    color: $color-base;
    padding: scale-rem(.8rem);
    position: absolute;
    min-width: 100%;
    z-index: 2;

    a {
      color: $color-link-default;
      display: inline-block;
    }
  }
}

//==============================
// Specific component overrides
//==============================

[id=helpmenu] {
  width: scale-rem(21rem);
}