@import "dxHelpers/reset";

.indented-shape {
    --background: rgb(170 203 255);
    --wide: 2px;

    background-color: var(--background);
    height: var(--wide);
    margin-bottom: var(--dx-g-spacing-xs);
    margin-right: var(--dx-g-spacing-sm);
    position: relative;
    width: var(--shape-width);
}

.indented-shape::after {
    background-color: var(--background);
    bottom: 0;
    content: "";
    height: 15px;
    position: absolute;
    width: var(--wide);
}

.option {
    display: flex;
    font-family: var(--dx-g-font-sans);
    width: 100%;
    padding: var(--dx-g-spacing-sm);
    font-size: var(--dx-g-text-sm);
    border-radius: var(--dx-g-spacing-xs);
    transition: var(--dx-g-transition-hue-1x);
    align-items: center;
    outline: none !important;
}

.option:focus {
    box-shadow: inset 0 0 0 1px var(--dx-g-blue-vibrant-50);
}

.option:active {
    background: var(--dx-g-cloud-blue-vibrant-95) !important;
}

.option:not(.option-active):hover {
    background: var(--dx-g-gray-95);
}

.option-active {
    --dx-c-dropdown-option-label-color: var(--dx-g-blue-vibrant-50);

    background: var(--dx-g-cloud-blue-vibrant-95);
}

.option_details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: var(--dx-g-font-sans);
    font-size: var(--dx-g-text-sm);
    text-align: left;
}

.option-indented .option_details {
    align-items: center;
    flex-direction: row;
}

.option_label {
    color: var(--dx-c-dropdown-option-label-color, var(--dx-g-blue-vibrant-50));
    display: flex;
    align-items: center;
    font-weight: var(--dx-c-dropdown-option-font-weight, var(--dx-g-font-bold));
    font-size: var(--dx-c-dropdown-option-font-size, var(--dx-g-text-base));
}

.option-indented .option_label {
    display: box;
    max-width: 300px;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.option_label > *:last-child {
    margin-left: var(--dx-g-spacing-sm);
}

.option_description {
    color: var(--dx-g-gray-30);
    margin-top: var(--dx-g-spacing-xs);
    line-height: 18px;
}

.option_icon {
    margin-right: var(--dx-g-spacing-md);
    flex-shrink: 0;
}

.option-indented {
    padding-top: var(--dx-g-spacing-xs);
    padding-bottom: var(--dx-g-spacing-xs);
}

.option-indented:not([data-index="0"]) {
    --base-indentation: calc(var(--dx-g-spacing-md) + var(--shape-width));
    --shape-width: 8px;

    padding-left: calc(var(--indentation, 0px) + var(--dx-g-spacing-md));
}

[data-index="2"] {
    --indentation: var(--base-indentation);
}

[data-index="3"] {
    --indentation: calc(2 * var(--base-indentation));
}

[data-index="4"] {
    --indentation: calc(3 * var(--base-indentation));
}

[data-index="5"] {
    --indentation: calc(4 * var(--base-indentation));
}

[data-index="6"] {
    --indentation: calc(5 * var(--base-indentation));
}

[data-index="7"] {
    --indentation: calc(6 * var(--base-indentation));
}

[data-index="8"] {
    --indentation: calc(7 * var(--base-indentation));
}

[data-index="9"] {
    --indentation: calc(8 * var(--base-indentation));
}

[data-index="10"] {
    --indentation: calc(9 * var(--base-indentation));
}

[data-index="11"] {
    --indentation: calc(10 * var(--base-indentation));
}

[data-index="12"] {
    --indentation: calc(11 * var(--base-indentation));
}

[data-index="13"] {
    --indentation: calc(12 * var(--base-indentation));
}

[data-index="14"] {
    --indentation: calc(13 * var(--base-indentation));
}

[data-index="15"] {
    --indentation: calc(14 * var(--base-indentation));
}

[data-index="16"] {
    --indentation: calc(15 * var(--base-indentation));
}

[data-index="17"] {
    --indentation: calc(16 * var(--base-indentation));
}

[data-index="18"] {
    --indentation: calc(17 * var(--base-indentation));
}

[data-index="19"] {
    --indentation: calc(18 * var(--base-indentation));
}