// Copyright 2021 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only .ChatColorPicker { $bubble-size: 40px; &__container { max-width: 748px; margin-block: 0; margin-inline: auto; hr { @include light-theme { border-color: $color-gray-15; } @include dark-theme { border-color: $color-gray-75; } } } &__modal__body.module-Modal__body { overflow-x: hidden; } &__bubbles { align-items: center; display: grid; grid-gap: 24px; grid-template-columns: repeat(auto-fit, $bubble-size); justify-content: center; margin-block: 20px; margin-inline: 0; } &__bubble { align-items: center; display: flex; justify-content: center; @include color-bubble($bubble-size); &--selected { border-color: $color-gray-75; @include dark-theme { border-color: $color-white; } } &:focus { border-color: $color-ultramarine; outline: none; } &--custom-selected { &::after { content: ''; display: block; height: 24px; width: 24px; @include color-svg( '../images/icons/v2/more-horiz-24.svg', $color-gray-05 ); } } &--custom { background-color: $color-gray-05; } } &__add-icon { @include color-svg('../images/icons/v2/plus-24.svg', $color-gray-90); display: block; height: 24px; width: 24px; } }