.container {
  display: flex;
  flex-direction: column;
  gap: var(--ktc-dimension-gap-dropdown-vertical);

  .dropdownWrapper {
    position: relative;
    & > ul {
      position: absolute;
      width: 100%;
      top: calc(100% + 4px);
      box-sizing: border-box;
      max-height: calc(
        var(--ktc-dimension-height-dropdown-menu-item) * 4.5
      ); //max-height of the container is 4.5 time the height of an option.
      overflow: scroll;
    }

    & > button[aria-expanded='false'] ~ ul {
      visibility: hidden;
    }

    & > button[aria-expanded='true'] ~ ul {
      visibility: visible;
    }

    &__up > ul {
      bottom: 100%;
    }
  }
}

.label {
  color: var(--ktc-color-text-dropdown-label);
  font-family: var(--ktc-typography-component-dropdown-label-font-family);
  font-size: var(--ktc-typography-component-dropdown-label-font-size);
  font-weight: var(--ktc-typography-component-dropdown-label-font-weight);
  letter-spacing: var(--ktc-typography-component-dropdown-label-letter-spacing);
  line-height: var(--ktc-typography-component-dropdown-label-line-height);
}

.helper {
  color: var(--ktc-color-text-dropdown-helper);
  font-family: var(--ktc-typography-component-dropdown-helper-font-family);
  font-size: var(--ktc-typography-component-dropdown-helper-font-size);
  font-weight: var(--ktc-typography-component-dropdown-helper-font-weight);
  letter-spacing: var(
    --ktc-typography-component-dropdown-helper-letter-spacing
  );
  line-height: var(--ktc-typography-component-dropdown-helper-line-height);

  &__error {
    color: var(--ktc-color-text-dropdown-error);
  }
}

.headingButton {
  background: none;
  border: none;
  padding: 0;
}