@use "sass:math";

@use "../../variables/units";
@use "../../variables/colors";
@use "../../variables/scaffolding";
@use "../../variables/typography";
@use "../../variables/zindex";

@use "../link";

@use "dropdown-menu.variables" as dropdown-menu-variables;

@mixin root() {
  display: inline-block;
}

@mixin children() {
  > button:not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),
  > .dso-primary,
  > .dso-secondary,
  > .dso-tertiary {
    position: relative;

    &::after {
      content: "";
      display: inline-block;
    }
  }

  > .dso-primary,
  > .dso-secondary {
    &::after {
      margin-inline-start: units.$u1;
    }
  }

  .dso-group-label {
    color: colors.$grijs-40;
    font-size: (math.div(14, 16) * 1em);
    font-weight: 400;
    margin: 0;
    padding-block: (units.$u1 * 0.5) (units.$u1 * 0.25);
    padding-inline: dropdown-menu-variables.$inline-padding;
    text-transform: uppercase;
  }

  ul {
    margin: 0;
    padding: 0;

    &:not(:last-child) {
      border-block-end: 1px solid colors.$grijs-10;
      margin-block-end: 11px;
      padding-block-end: 11px;
    }
  }

  .dso-dropdown-options {
    background-clip: padding-box;
    background-color: dropdown-menu-variables.$background-color;
    border-radius: scaffolding.$border-radius-base;
    border: 1px solid dropdown-menu-variables.$border-color;
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);
    font-size: typography.$root-font-size-base;
    min-inline-size: 160px;
    padding-block: 5px;
    padding-inline: 0;
    z-index: zindex.$dropdown-options;

    li {
      list-style: none;

      a {
        &:visited {
          color: dropdown-menu-variables.$link-color;
        }
      }

      a,
      button {
        @include link.reverse();

        clear: both;
        color: dropdown-menu-variables.$link-color;
        display: block;
        font-weight: 400;
        line-height: 1.5;
        padding-block: 3px;
        padding-inline: dropdown-menu-variables.$inline-padding;
        text-decoration: none;
        white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- We don't want wrapping in Dropdown items

        &:hover,
        &:focus {
          background-color: colors.$grasgroen;
          border-color: colors.$grasgroen;
          color: colors.$wit;
          text-decoration: none;
        }
      }

      button {
        background-color: transparent;
        border: 0;
        border-radius: 0;
        text-align: inherit;
        inline-size: 100%;
      }
    }
  }
}

@mixin checkable() {
  .dso-group-label {
    padding-inline-start: units.$u5;
  }

  li {
    a,
    button {
      padding-inline-start: units.$u5;
    }

    &.dso-checked {
      a,
      button {
        &:not(:focus) {
          background-color: colors.$grasgroen;
          border-color: colors.$grasgroen;
          color: colors.$wit;
        }
      }
    }
  }
}