import{css as n}from"styled-components";import{ChevronDownIcon as t}from"@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon";import{Select as i}from"./Select.js";import{styled as e}from"../../../styled-components.js";const r=n`
  background-color: var(--panel-samples-dropdown-bg-color);
  border: var(--panel-samples-dropdown-border);
  color: var(--panel-samples-dropdown-color);

  &,
  &:hover,
  &:focus-within {
    box-shadow: none;
  }
`,a=e(i)`
  box-sizing: border-box;
  outline: none;
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  width: ${({fullWidth:o})=>o?"100%":"auto"};
  cursor: pointer;
  text-transform: none;

  label {
    box-sizing: border-box;
    min-width: 90px;
    height: 36px;
    outline: none;
    display: inline-block;
    color: var(--docs-dropdown-text-color);
    border-radius: var(--border-radius-md);
    padding: var(--docs-dropdown-padding);
    vertical-align: bottom;
    width: ${({fullWidth:o})=>o?"100%":"auto"};
    text-transform: none;
    line-height: inherit;
    font-size: var(--docs-dropdown-font-size);
    font-family: inherit;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    &,
    &:hover,
    &:focus-within {
      box-shadow: none;
    }

    ${({variant:o})=>o==="dark"?r:""};
  }

  .dropdown-select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    appearance: none;
    cursor: pointer;

    color: var(--text-color-secondary);
    line-height: inherit;
    font-size: var(--font-size-base);
    font-family: inherit;
    padding: var(--docs-dropdown-padding);
    ${({variant:o})=>o==="dark"?r:""};
  }
`,c=e(a)`
  svg {
    top: 60%;
    transform: translateY(-60%);
  }
  label {
    padding: 0 26px 0 4px;
    background: transparent;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    appearance: none;
    height: auto;

    &:hover,
    &:focus-within {
      box-shadow: none;
    }
  }
`,h=e(t)`
  position: absolute;
  right: 10px;
  top: 10px;
`;export{h as Arrow,a as Select,c as SimpleSelect};
