@yandex/ui/Button/_view/Button_view_clear.css

Yandex UI components

/* common */
.Button2_view_clear {
        color: var(--button-view-clear-typo-color-base);
    }
.Button2_view_clear .Button2-Text,
    .Button2_view_clear .Button2-Icon {
        opacity: .65;

        transition: opacity .1s ease-out;
    }
.Button2_view_clear::before {
        transition: background-color .15s linear;
    }
/* press */
.Button2_view_clear.Button2_pressed {
        transition: none;
        transform: scale(.96);
    }
/* 1.042 ≈ 1/0.96 */
.Button2_view_clear.Button2_pressed::after {
        transform: scale(1.042);
    }
/* disable */
.Button2_view_clear[aria-disabled='true'] {
        color: var(--button-view-clear-typo-color-disabled);
    }
.Button2_view_clear[aria-disabled='true']::before {
        /* uses --color-transparent token for correct handling of specificity in postcss-theme-fold */
        border-color: var(--color-transparent);
        background-color: var(--button-view-clear-fill-color-disabled);
    }
.Button2_view_clear[aria-disabled='true'] .Button2-Text,
    .Button2_view_clear[aria-disabled='true'] .Button2-Icon {
        opacity: 1;
    }
/* check */
.Button2_view_clear.Button2_checked {
        color: var(--button-view-clear-typo-color-checked-base);
    }
.Button2_view_clear.Button2_checked::before {
        /* uses --color-transparent token for correct handling of specificity in postcss-theme-fold */
        border-color: var(--color-transparent);
        background-color: var(--button-view-clear-fill-color-checked-base);
    }
.Button2_view_clear.Button2_checked .Button2-Text {
        opacity: 1;
    }