@use "../../settings/colours" as *;
@use "../../vendor/govuk-frontend" as *;

.moj-button-menu {
  display: inline-block;
  position: relative;
}

.moj-button-menu__toggle-button,
.moj-button-menu__single-button {
  margin-bottom: 0;
  vertical-align: baseline;
}

.moj-button-menu__toggle-button span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.moj-button-menu__toggle-button svg {
  margin-top: 2px;
  transform: rotate(180deg);
}

.moj-button-menu__toggle-button[aria-expanded="true"] svg {
  transform: rotate(0deg);
}

.moj-button-menu__wrapper {
  z-index: 10;
  margin: 5px 0 0; // 2px shadow, 3px gap
  padding: 0;
  list-style: none;

  &,
  .moj-button-group--inline {
    position: absolute;
    width: 200px;
  }

  &--right {
    right: 0;
  }
}

/* Menu items with no JS */
.moj-button-menu__item {
  display: inline-block;
  width: auto; // Override GDS’s 100% width
  margin-right: govuk-spacing(2);
  margin-bottom: govuk-spacing(2);
  vertical-align: baseline;

  &:last-child {
    margin-right: 0;
  }
}

/* Menu items with JS */
.moj-button-menu li > .moj-button-menu__item {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  width: 100%;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding: govuk-spacing(2);
  border: $govuk-border-width-form-element solid transparent;
  border-bottom: 1px solid $moj-button-menu-color;
  border-radius: 0;
  color: $govuk-text-colour;
  background-color: govuk-colour("black", $variant: "tint-95");
  text-align: left;
  vertical-align: top;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  @include govuk-font($size: 19, $line-height: 19px);

  &:link,
  &:visited,
  &:active,
  &:hover {
    color: $govuk-text-colour;
    text-decoration: none;
  }

  &:active,
  &:hover {
    color: govuk-colour("white");
  }

  // Fix unwanted button padding in Firefox
  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }

  &:hover {
    background-color: $moj-button-menu-hover-color;
  }

  &:focus {
    z-index: 10;
    border-color: $govuk-focus-colour;
    outline: $govuk-focus-width solid transparent;
    box-shadow: inset 0 0 0 1px $govuk-focus-colour;
  }

  &:focus:not(:active):not(:hover) {
    border-color: $govuk-focus-colour;
    color: $govuk-focus-text-colour;
    background-color: $govuk-focus-colour;
    box-shadow: 0 2px 0 $govuk-focus-text-colour;
  }
}

/*# sourceMappingURL=_button-menu.scss.map */