@use "../../settings/constants";

.mykn-dropdown {
  display: inline-flex;
  position: relative;
  justify-content: center;

  > .mykn-button {
    width: 100%;
  }

  &--open > .mykn-button {
    outline: 1px solid var(--dropdown-border);
  }

  @at-root {
    &__dropdown {
      width: fit-content;
      border: 1px solid var(--dropdown-border);
      border-radius: var(--sizes-border-radius-s);
      box-sizing: border-box;
      z-index: 2000;

      .mykn-a,
      .mykn-button,
      .mykn-dropdown {
        width: 100%;
      }
    }

    @media screen and (max-width: constants.$breakpoint-desktop - 1px) {
      &__dropdown {
        width: 100%; // Fallback.
        width: min(
          100%,
          max(calc(100vw - 2 * var(--sizes-spacing-xs-h)), 100cqw)
        );
      }
    }

    @media screen and (min-width: constants.$breakpoint-desktop) {
      &__dropdown .mykn-toolbar--direction-horizontal {
        width: min-content;
      }
    }

    @media screen and (min-width: constants.$breakpoint-desktop) {
      &__dropdown .mykn-toolbar--direction-vertical {
        width: max-content;
      }
    }
  }
}