:root { --button-009-color: #fffff5; --button-009-color-background: #e2480c; --button-009-color-focus: #000; --button-009-border-radius: 0 1rem 0 1rem; --button-009-icon-size: 0.875em; --button-009-padding-top: 0.75em; --button-009-padding-right: 0.75em; --button-009-padding-bottom: 0.75em; --button-009-padding-left: 1em; --button-009-gap: 0.375em; --button-009-overflow: clip; --button-009-focus-inset: -0.125em; --button-009-click-scale: 0.955 0.925; --button-009-ease-hover: cubic-bezier(0.32, 0.72, 0, 1); --button-009-ease-click: cubic-bezier(0.4, 0, 0.2, 1); --button-009-ease-focus: cubic-bezier(0.32, 0.72, 0, 1); } .button-009 { -webkit-tap-highlight-color: transparent; transition: scale 0.15s var(--button-009-ease-click), background-color 0.3s var(--button-009-ease-hover); } .button-009:is(:hover, :focus-visible) { --button-009-color-background: #5f210b; } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .button-009:is(:hover, :focus-visible) .button-009__text, [data-hover]:is(:hover, :focus-visible) .button-009 .button-009__text { translate: calc(var(--button-009-icon-size) + var(--button-009-gap) + var(--button-009-padding-right) - var(--button-009-padding-left)) 0 0; transition: translate 0.5s 0.075s var(--button-009-ease-hover); } .button-009:is(:hover, :focus-visible) .button-009__icon.is--left, [data-hover]:is(:hover, :focus-visible) .button-009 .button-009__icon.is--left { translate: 0 0 0; opacity: 1; transition: translate 0.5s 0.075s var(--button-009-ease-hover), opacity 0.15s 0.075s ease-out; } .button-009:is(:hover, :focus-visible) .button-009__icon.is--right, [data-hover]:is(:hover, :focus-visible) .button-009 .button-009__icon.is--right { translate: 1.5em 0 0; opacity: 0; transition: translate 0.5s 0.05s var(--button-009-ease-hover), opacity 0.15s 0.075s ease-out; } } .button-009:is(:focus-visible)::after { box-shadow: 0 0 0 0.125em var(--button-009-color-focus); } .button-009:active { scale: var(--button-009-click-scale); } .button-009::after { content: ''; display: block; position: absolute; inset: var(--button-009-focus-inset); border-radius: var(--button-009-border-radius); transition: box-shadow 0.3s var(--button-009-ease-focus); pointer-events: none; z-index: 1; } .button-009__text { transition: translate 0.5s var(--button-009-ease-hover); } .button-009__icon { transition: translate 0.5s var(--button-009-ease-hover), opacity 0.15s ease-out; } .button-009__icon.is--left { opacity: 0; translate: -1.5em 0 0; } :root { --button-011-color: #121212; --button-011-color-background: #fff; --button-011-color-focus: #000; --button-011-border-radius: 2.5em; --button-011-padding-top: 0.75em; --button-011-padding-right: 1em; --button-011-padding-bottom: 0.75em; --button-011-padding-left: 1.5em; --button-011-icon-size: 0.325em; --button-011-icon-padding-left: 0.6875em; --button-011-icon-border-radius: 0.0675em; --button-011-icon-rotate: 45deg; --button-011-focus-inset: -0.125em; --button-011-click-scale: 0.955 0.925; --button-011-ease-hover-snappy: linear(0, 0.0084, 0.0311, 0.0651, 0.1077, 0.1564, 0.2094, 0.2649, 0.3215, 0.3782, 0.434, 0.4881, 0.5401, 0.5894, 0.6359, 0.6793, 0.7194, 0.7564, 0.7901, 0.8208, 0.8484, 0.8731, 0.8951, 0.9146, 0.9316, 0.9465, 0.9594, 0.9704, 0.9798, 0.9877, 0.9943, 0.9997, 1.0041, 1.0075, 1.0102, 1.0122, 1.0136, 1.0145, 1.015, 1.0152, 1.0151, 1.0147, 1.0142, 1.0136, 1.0128, 1.012, 1.0112, 1.0103, 1.0095, 1.0086, 1.0078, 1.007, 1.0063, 1.0056, 1.0049, 1.0043, 1.0037, 1.0032, 1.0027, 1.0023, 1.0019, 1.0016, 1.0013, 1.0011, 1.0008, 1.0006, 1.0005, 1.0003, 1.0002, 1.0001, 1, 0.9999, 0.9999, 0.9998, 0.9998, 0.9998, 0.9998, 0.9998, 0.9998, 0.9998, 0.9998, 0.9998, 0.9998, 0.9998, 0.9998, 0.9998, 0.9998, 0.9999, 0.9999, 0.9999, 0.9999, 0.9999, 0.9999, 0.9999, 0.9999, 0.9999, 1, 1, 1, 1, 1); --button-011-ease-hover-smooth: cubic-bezier(0.32, 0.72, 0, 1); --button-011-ease-click: cubic-bezier(0.4, 0, 0.2, 1); --button-011-ease-focus: cubic-bezier(0.32, 0.72, 0, 1); } .button-011 { -webkit-tap-highlight-color: transparent; transition: scale 0.15s var(--button-011-ease-click); } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .button-011:is(:hover, :focus-visible) .button-011__icon, [data-hover]:is(:hover, :focus-visible) .button-011 .button-011__icon { translate: calc(100% - (var(--button-011-icon-padding-left) * 2 + var(--button-011-icon-size))) 0 0; transition: translate 0.66s 0.05s var(--button-011-ease-hover-snappy); } .button-011:is(:hover, :focus-visible) .button-011__split-char, [data-hover]:is(:hover, :focus-visible) .button-011 .button-011__split-char { translate: calc(var(--button-011-padding-left) * -1 + var(--button-011-padding-right)) 0 0; transition: translate 0.66s calc((var(--char) - 1) * 0.016s + 0.05s) var(--button-011-ease-hover-snappy); } } .button-011:is(:focus-visible)::after { box-shadow: 0 0 0 0.125em var(--button-011-color-focus); } .button-011:active { scale: var(--button-011-click-scale); } .button-011::after { content: ''; display: block; position: absolute; inset: var(--button-011-focus-inset); border-radius: var(--button-011-border-radius); transition: box-shadow 0.3s var(--button-011-ease-focus); pointer-events: none; z-index: 1; } .button-011__icon { transition: translate 0.5s var(--button-011-ease-hover-snappy); } .button-011__split-char { transition: translate 0.5s var(--button-011-ease-hover-snappy); }