@mixin input {
    width: 452px;
    padding: 12px 16px;
    border: 2px solid rgba(var(--center-channel-color-rgb), 0.16);
    border-radius: 4px;
    font-size: 16px;

    &:active,
    &:focus {
        border: 2px solid var(--button-bg);
    }
}

@mixin sideIllustrationKeyframe($name, $startOffsetPx, $endOffsetPx) {
    @keyframes #{$name}SlideInRight {
        from {
            right: #{$startOffsetPx}px;
        }

        to {
            right: #{$endOffsetPx}px;
        }
    }

    @keyframes #{$name}SlideOutRight {
        from {
            right: #{$endOffsetPx}px;
        }

        to {
            right: #{$startOffsetPx}px;
        }
    }
}
