// Copyright 2021 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only .MediaQualitySelector { &__popper { @extend %module-composition-popper; padding-block: 12px; padding-inline: 16px; width: auto; } &__title { @include font-body-1-bold; margin-bottom: 12px; } &__button { @include button-reset(); align-items: center; border-radius: 4px; display: flex; height: 32px; justify-content: center; width: 32px; @include keyboard-mode { &:focus { outline: 2px solid $color-ultramarine; } } outline: none; &::after { content: ''; display: block; flex-shrink: 0; height: 24px; width: 24px; @include light-theme { @include color-svg('../images/icons/v2/sq-24.svg', $color-gray-75); } @include dark-theme { @include color-svg('../images/icons/v2/sq-24.svg', $color-gray-15); } } &--hq { &::after { @include light-theme { @include color-svg( '../images/icons/v2/hq-outline-24.svg', $color-gray-75 ); } @include dark-theme { @include color-svg( '../images/icons/v2/hq-solid-24.svg', $color-gray-15 ); } } } &--active { opacity: 1; @include light-theme() { background-color: $color-gray-05; } @include dark-theme() { background-color: $color-gray-75; } } } &__option { @include button-reset(); align-items: center; border-radius: 6px; display: flex; height: 42px; margin-block: 2px; margin-inline: 0; min-width: 200px; &--checkmark { height: 12px; margin-block: 0; margin-inline: 6px; width: 16px; } &--selected { @include color-svg('../images/icons/v2/check-24.svg', $color-ultramarine); } &--title { @include font-body-2; } &--description { @include font-subtitle; } &:hover { @include light-theme() { background-color: $color-gray-05; } @include dark-theme() { background-color: $color-gray-65; } } &--focused, &:focus, &:active { border-radius: 6px; box-shadow: 0 0 1px 1px $color-ultramarine; outline: none; } } }