.dropdown-wrapper > label.switch {
    align-self: center;
    flex-shrink: 0;
}

.dropdown-wrapper {
    /*flex-direction: column;*/
    min-height: 2em; /* same height as input (when its visible) */
    height: unset !important;
    padding: 0.1em !important;
    overflow: visible;
    align-items: stretch;
}
.dropdown-wrapper:not(.disabled) {
    cursor: pointer;
}

.input-wrapper.dropdown-wrapper > .btn-icon {
    height: unset;
    margin-top: -0.1em;
    margin-bottom: -0.1em;
}
.input-wrapper.dropdown-wrapper > .btn-icon:not(.left):last-of-type { margin-right: -0.1em !important; }
.input-wrapper.dropdown-wrapper > .btn-icon.left { margin-left: -0.1em !important; }

/* #region embedded dropdown */
/* this is for dropdowns that share an input-wrapper with another input */
.input-wrapper > .dropdown-wrapper {
    border: none !important;
    box-shadow: none !important;
    background: transparent;
    margin-right: -0.5em;
}
/* #endregion */


/* #region open / close */
.dropdown-wrapper.open .dropdown-options { display: block; }
.dropdown-wrapper.open .dropdown-options.wrap { display: flex; }
.dropdown-wrapper:not(.open) .dropdown-options { display: none; }
.dropdown-wrapper.has-options.open.upward {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.dropdown-wrapper.has-options.open:not(.upward) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dropdown-wrapper.has-options.open.upward > label {
    /* when dropdown opens upward, have to swap label to bottom, or hide it entirely. it's a bit weird sweapping it to bottom, so i'm just hiding it for now
    top: unset;
    bottom: -0.6em;
    margin-bottom: 0;*/
    display: none;
}

.dropdown-wrapper:not(.loading):not(.clearable).has-options.open .value-container:after {
    /* triangle shape (upward) */
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    border-bottom: 0.3em solid var(--color-text);
    border-top: none;
}
.dropdown-wrapper.clearable.open:not(.loading):after { border: none; }
.dropdown-wrapper.clearable.open:not(.loading) .btn-clear { display: unset; }

/* #region custom render (hide input when closed) */
.dropdown-wrapper.custom-render.has-value:not(.open) > .value-container > input { display: none; }
.dropdown-wrapper.custom-render.has-value:not(.open) > .value-container > .value {
    margin-top: 0.25em; /* 04-09-2020: added this to prevent label overlap */
    padding: 0 1.25em 0 0.25em;
    justify-content: center;
}
/* 06-29-21: hide custom rendered value when open. prevents dropdown height from changing */
.dropdown-wrapper.custom-render.has-value.open > .value-container > .value {
    display: none;
}
/* #endregion */
/* #endregion */

.dropdown-wrapper .btn-clear {
    display: none;
    position: absolute;
    font-size: 1.5em;
    right: 0;
    bottom: 0.05em;
    margin: 0;
    border-width: .08em;
    overflow: visible;
    background-color: var(--color-container);
    padding: 0 0.15em;
}

.dropdown-wrapper .value-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    width: 100%;
}


.dropdown-wrapper:not(.loading) .value-container:after {
    content: "";
    position: absolute;
    z-index: 1;
    right: 0.5em;
    bottom: 0.6em;
    pointer-events: none;
}
.dropdown-wrapper:not(.loading):not(.open) .value-container:after {
    /* triangle shape (downward) */
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    border-top: 0.3em solid var(--color-text);
    border-bottom: none;
}
.dropdown-wrapper.disabled .value-container:after {
    border-top-color: var(--color-auxiliary) !important;
}

.dropdown-wrapper.disabled:after {
    opacity: 0.5;
}
/* #region error colors */
.dropdown-wrapper.error {
    border-color: var(--color-error);
}
.dropdown-wrapper.error > * {
    color: var(--color-error);
}
    .dropdown-wrapper.error:not(.loading):after {
        border-top-color: var(--color-error);
    }

    .dropdown-wrapper.error:not(.loading).open:after {
        border-bottom-color: var(--color-error);
    }
/* #endregion error colors */


.dropdown-wrapper .value-container > input[type=number]::-webkit-inner-spin-button,
.dropdown-wrapper .value-container > input[type=number]::-webkit-outer-spin-button {
    /* hiding number spinners */
    -webkit-appearance: none;
    margin: 0;
}

.dropdown-wrapper .value-container > input {
    padding: 0 1.25em 0 0.25em; /* offsetting for arrow */
}
.dropdown-wrapper.read-only .value-container > input:not(:disabled) {
    cursor: pointer;
}
   
.dropdown-wrapper:not(.loading):after {
    cursor: pointer;
}



.dropdown-wrapper > .value-container > .value {
    display: flex;
    flex-grow: 100;
    flex-direction: column;
    width: 100%;    
    max-height: 10em;
    overflow-y: auto;
}
    .dropdown-wrapper > .value-container > .value:not(:empty) {
        padding: 0.25em 0.35em;
    }

.dropdown-wrapper > .value-container > .value:not(:empty) {
    margin-top: 0.125em;
}
.dropdown-wrapper > .value-container > .value.placeholder {
    opacity: 0.75;
    font-style: italic;
}


.dropdown-wrapper > .value-container > .value .pill:first-child { margin-top: 0.25em; }


.dropdown-wrapper > .value-container > .value .pill {
    border-radius: 8px;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    margin-bottom: 0.35em;
    padding: 0.2em 0.2em 0.2em 0.5em;
    user-select: none;
}

.dropdown-wrapper > .value-container > .value .pill > * {
    color: var(--color-accent-text);
}

.dropdown-wrapper > .value-container > .value .pill .btn-icon {
    border-radius: 5em;
    padding: 0.1em;
}

.dropdown-wrapper > .value-container > .value.wrap .pill .btn-icon {
    margin-left: 0.25em;
    padding: 0.05em;
    height: 100%;
}

.dropdown-wrapper > .value-container > .value .pill .btn-icon:not([disabled]):hover {
    background: var(--color-error);
    color: var(--color-error-text);
}

/* #region value wrap */
.dropdown-wrapper > .value-container > .value.wrap {
    flex-wrap: wrap;
    flex-direction: row;
    grid-gap: 0.5em;
}
.dropdown-wrapper > .value-container > .value.wrap .pill { margin: 0; }
/* #endregion */


.dropdown-options {
    background: var(--color-container);
    box-sizing: content-box;
    border: 0.1rem solid var(--color-accent);
    border-top: none;
    border-radius: 0 0 0.25em 0.25em;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 9em;
    position: absolute;
    top: 100%;
    left: -0.1rem;
    width: 100%;
    display: none;
    z-index: 3;
    /*box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.25);*/
    box-shadow: 0px 0px 2px 1px var(--color-accent);
}
.dropdown-options:empty { display: none !important; }
.dropdown-options.large { max-height: 16em; }

.dropdown-wrapper.upward .dropdown-options {
    top: unset;
    bottom: 100%;
    border-top: 2px solid var(--color-accent);
    border-bottom: none;
    border-radius: 0.25em 0.25em 0 0;
}

.dropdown-options > div {
    display: flex;
    align-items: center;
    min-height: 1.5em;
    padding: 0.25em 0.5em;
    color: var(--color-text);
    border-top: 1px solid var(--color-stripe-border);
    cursor: pointer;
    white-space: pre; /*making sure spaces appear after search highlights */
}

.dropdown-wrapper.upward .dropdown-options > div {
    border-top: none;
    border-bottom: 1px solid var(--color-stripe-border);
}

.dropdown-options .option.selected mark {
    background: var(--color-accent-text) !important;
    color: var(--color-accent) !important;
}

.dropdown-options > div:nth-child(odd) {
    background: var(--color-header);
}

.dropdown-options > .option.selected {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

/* #region custom scrollbar */

.dropdown-options::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: var(--color-header-border);
}

.dropdown-options::-webkit-scrollbar {
    width: 0.5em;
    background-color: var(--color-header-border);
}

.dropdown-options::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: var(--color-accent);
}
/* #endregion */


/* #region options wrap */
.dropdown-options.wrap {
    flex-wrap: wrap;
    grid-gap: 0.5em;
    padding: 0.5em;
    /* have to reduce width due to additional horizontal padding */
    width: calc(100% - 1em);
}
.dropdown-options.wrap > div {
    padding: 0.5em;
    border: none !important;
    background: var(--color-text);
    color: var(--color-text-text);
    border-radius: 8px;
}
@media screen and (max-width: 600px) {
    .dropdown-options.wrap > div { flex-grow: 1; }
}
/* #endregion */

/* #region grouping */
.dropdown-options .group-label {
    padding-left: 0.25em;
    background: var(--color-text);
    color: var(--color-text-text);
    display: flex;
    font-size: 1.1em;
    padding: 0.125em .25em;
    font-style: italic;
}
.dropdown-options .group-label::after {
    content: "...";
}
.dropdown-options.grouped .option {
    padding-left: 0.75em;
}
/* #endregion */


/* TODO: might add a "custom-render" class for all dropdowns that display value outsside of input. when dropdown value is displayed inside the value container and the input is readonly, it doesn't need to eixst */
.dropdown-wrapper.multi-select.read-only input { 
    /* hack to allow input focus without it being visible. "display: none;" prevents the input focusout event from closing dropdown */
    height: 0;
    padding: 0;
    margin: 0;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}