.icon-button {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .icon-button_small {
        width: 40px;
        height: 40px;
    }

    .icon-button_medium {
        width: 48px;
        height: 48px;
    }

    .icon-button_default svg {
        color: #000;
        stroke: #000;
    }

    .icon-button_default svg:hover {
        background-color: #f4f6fb;
    }

    .icon-button_contrast svg {
        color: #FFF;
        stroke: #FFF;
    }

    :global(.focus-visible) .icon-button {
        outline: 4px solid #0070ff7a;
    }

    .icon-button_disabled {
        pointer-events: none;
    }

    .icon-button_disabled svg {
        opacity: 0.3;
    }

    .icon-button-element {
        display: flex;
        background: transparent;
        border: none;
    }

    .icon-button-element:active {
        transform: scale(0.96);
        transition-duration: 100ms;
        transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .icon-button-element:focus {
        outline: none;
    }