* {
    box-sizing: border-box;
}

*:active {
    outline: none;
}

*:focus {
    outline: none;
    box-shadow: var(--const-global-focus);
}

input,
button {
    font-family: inherit;
    font-size: inherit;
}

.sr,
.sr button {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

.hidden,
[hidden] {
    display: none;
}

.invisible {
    visibility: hidden;
}


q2-option {
    display: block;
}

q2-option .q2-option-container {
    --q2-option-selected-icon-size: var(
        --tct-option-selected-icon-size,
        var(--tct-scale-3, var(--app-scale-3, 15px))
    );
}

q2-option .q2-option-container:not([hidden]) {
    padding: var(--tct-scale-2, var(--app-scale-2, 10px));
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

q2-option .q2-option-container[aria-disabled='true'] {
    cursor: not-allowed;
    opacity: var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));
}

q2-option .q2-option-container:not([aria-disabled='true']):hover,
q2-option:focus .q2-option-container,
q2-option[active] .q2-option-container {
    background-color: var(--tct-option-active-bg, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)));
    color: var(--tct-option-active-font-color, inherit);
}

q2-option .q2-option-selection {
    flex: 0 0 var(--q2-option-selected-icon-size);
    margin-right: var(--tct-scale-1, var(--app-scale-1, 5px));
}

q2-option .q2-option-selection-icon {
    width: var(--q2-option-selected-icon-size);
    height: var(--q2-option-selected-icon-size);
}

q2-option .q2-option-content {
    flex: 1 1 auto;
}

q2-option:not([multiline]) .q2-option-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}