/* docara-shell-source: runtime/utility/align-items/default/css/default.css */
@layer sf.utilities {
  .items-cross-start {
    align-items: start;
  }
  .items-cross-end {
    align-items: end;
  }
  .items-cross-center {
    align-items: center;
  }
  .items-cross-baseline {
    align-items: baseline;
  }
  .items-cross-stretch {
    align-items: stretch;
  }
}

/* docara-shell-source: runtime/utility/backdrop-filter-blur/default/css/default.css */
@layer sf.utilities {
  .backdrop-blur-small {
    --sf-backdrop-blur: blur(var(--sf-blur-small));
    -webkit-backdrop-filter: var(--sf-backdrop-blur, ) var(--sf-backdrop-brightness, ) var(--sf-backdrop-contrast, ) var(--sf-backdrop-grayscale, ) var(--sf-backdrop-hue-rotate, ) var(--sf-backdrop-invert, ) var(--sf-backdrop-opacity, ) var(--sf-backdrop-saturate, ) var(--sf-backdrop-sepia, );
            backdrop-filter: var(--sf-backdrop-blur, ) var(--sf-backdrop-brightness, ) var(--sf-backdrop-contrast, ) var(--sf-backdrop-grayscale, ) var(--sf-backdrop-hue-rotate, ) var(--sf-backdrop-invert, ) var(--sf-backdrop-opacity, ) var(--sf-backdrop-saturate, ) var(--sf-backdrop-sepia, );
  }
  .backdrop-blur {
    --sf-backdrop-blur: blur(var(--sf-blur-medium));
    -webkit-backdrop-filter: var(--sf-backdrop-blur, ) var(--sf-backdrop-brightness, ) var(--sf-backdrop-contrast, ) var(--sf-backdrop-grayscale, ) var(--sf-backdrop-hue-rotate, ) var(--sf-backdrop-invert, ) var(--sf-backdrop-opacity, ) var(--sf-backdrop-saturate, ) var(--sf-backdrop-sepia, );
            backdrop-filter: var(--sf-backdrop-blur, ) var(--sf-backdrop-brightness, ) var(--sf-backdrop-contrast, ) var(--sf-backdrop-grayscale, ) var(--sf-backdrop-hue-rotate, ) var(--sf-backdrop-invert, ) var(--sf-backdrop-opacity, ) var(--sf-backdrop-saturate, ) var(--sf-backdrop-sepia, );
  }
  .backdrop-blur-medium {
    --sf-backdrop-blur: blur(var(--sf-blur-medium));
    -webkit-backdrop-filter: var(--sf-backdrop-blur, ) var(--sf-backdrop-brightness, ) var(--sf-backdrop-contrast, ) var(--sf-backdrop-grayscale, ) var(--sf-backdrop-hue-rotate, ) var(--sf-backdrop-invert, ) var(--sf-backdrop-opacity, ) var(--sf-backdrop-saturate, ) var(--sf-backdrop-sepia, );
            backdrop-filter: var(--sf-backdrop-blur, ) var(--sf-backdrop-brightness, ) var(--sf-backdrop-contrast, ) var(--sf-backdrop-grayscale, ) var(--sf-backdrop-hue-rotate, ) var(--sf-backdrop-invert, ) var(--sf-backdrop-opacity, ) var(--sf-backdrop-saturate, ) var(--sf-backdrop-sepia, );
  }
  .backdrop-blur-large {
    --sf-backdrop-blur: blur(var(--sf-blur-large));
    -webkit-backdrop-filter: var(--sf-backdrop-blur, ) var(--sf-backdrop-brightness, ) var(--sf-backdrop-contrast, ) var(--sf-backdrop-grayscale, ) var(--sf-backdrop-hue-rotate, ) var(--sf-backdrop-invert, ) var(--sf-backdrop-opacity, ) var(--sf-backdrop-saturate, ) var(--sf-backdrop-sepia, );
            backdrop-filter: var(--sf-backdrop-blur, ) var(--sf-backdrop-brightness, ) var(--sf-backdrop-contrast, ) var(--sf-backdrop-grayscale, ) var(--sf-backdrop-hue-rotate, ) var(--sf-backdrop-invert, ) var(--sf-backdrop-opacity, ) var(--sf-backdrop-saturate, ) var(--sf-backdrop-sepia, );
  }
  .backdrop-blur-none {
    --sf-backdrop-blur: blur(var(--sf-blur-none));
    -webkit-backdrop-filter: var(--sf-backdrop-blur, ) var(--sf-backdrop-brightness, ) var(--sf-backdrop-contrast, ) var(--sf-backdrop-grayscale, ) var(--sf-backdrop-hue-rotate, ) var(--sf-backdrop-invert, ) var(--sf-backdrop-opacity, ) var(--sf-backdrop-saturate, ) var(--sf-backdrop-sepia, );
            backdrop-filter: var(--sf-backdrop-blur, ) var(--sf-backdrop-brightness, ) var(--sf-backdrop-contrast, ) var(--sf-backdrop-grayscale, ) var(--sf-backdrop-hue-rotate, ) var(--sf-backdrop-invert, ) var(--sf-backdrop-opacity, ) var(--sf-backdrop-saturate, ) var(--sf-backdrop-sepia, );
  }
}

/* docara-shell-source: runtime/utility/background-color/default/css/default.css */
@layer sf.utilities {
  .bg-transparent {
    background-color: var(--sf-transparent);
  }
  .bg-current {
    background-color: var(--sf-current);
  }
  .bg-surface-0 {
    background-color: var(--sf-surface-0);
  }
  .bg-surface-1 {
    background-color: var(--sf-surface-1);
  }
  .bg-surface-2 {
    background-color: var(--sf-surface-2);
  }
  .bg-surface-3 {
    background-color: var(--sf-surface-3);
  }
  .bg-surface-4 {
    background-color: var(--sf-surface-4);
  }
  .bg-surface {
    background-color: var(--sf-surface-1);
  }
  .bg-surface-inverse {
    background-color: var(--sf-surface-inverse);
  }
  .bg-surface-inverse-fixed {
    background-color: var(--sf-surface-inverse-fixed);
  }
  .bg-surface-container {
    background-color: var(--sf-surface-container);
  }
  .bg-on-surface {
    background-color: var(--sf-on-surface);
  }
  .bg-on-surface-variant {
    background-color: var(--sf-on-surface-variant);
  }
  .bg-surface-transparent-select {
    background-color: var(--sf-surface-transparent-select);
  }
  .bg-surface-transparent-overlay {
    background-color: var(--sf-surface-transparent-overlay);
  }
  .bg-disable {
    background-color: var(--sf-disable);
  }
  .bg-primary {
    background-color: var(--sf-primary);
  }
  .bg-primary-container {
    background-color: var(--sf-primary-container);
  }
  .bg-primary-transparent-select {
    background-color: var(--sf-primary-transparent-select);
  }
  .bg-primary-transparent-overlay {
    background-color: var(--sf-primary-transparent-overlay);
  }
  .bg-secondary {
    background-color: var(--sf-secondary);
  }
  .bg-secondary-container {
    background-color: var(--sf-secondary-container);
  }
  .bg-secondary-transparent-select {
    background-color: var(--sf-secondary-transparent-select);
  }
  .bg-secondary-transparent-overlay {
    background-color: var(--sf-secondary-transparent-overlay);
  }
  .bg-tertiary {
    background-color: var(--sf-tertiary);
  }
  .bg-tertiary-container {
    background-color: var(--sf-tertiary-container);
  }
  .bg-tertiary-transparent-select {
    background-color: var(--sf-tertiary-transparent-select);
  }
  .bg-tertiary-transparent-overlay {
    background-color: var(--sf-tertiary-transparent-overlay);
  }
  .bg-error {
    background-color: var(--sf-error);
  }
  .bg-error-container {
    background-color: var(--sf-error-container);
  }
  .bg-error-transparent-select {
    background-color: var(--sf-error-transparent-select);
  }
  .bg-error-transparent-overlay {
    background-color: var(--sf-error-transparent-overlay);
  }
  .bg-warning {
    background-color: var(--sf-warning);
  }
  .bg-warning-container {
    background-color: var(--sf-warning-container);
  }
  .bg-warning-transparent-select {
    background-color: var(--sf-warning-transparent-select);
  }
  .bg-warning-transparent-overlay {
    background-color: var(--sf-warning-transparent-overlay);
  }
  .bg-success {
    background-color: var(--sf-success);
  }
  .bg-success-container {
    background-color: var(--sf-success-container);
  }
  .bg-success-transparent-select {
    background-color: var(--sf-success-transparent-select);
  }
  .bg-success-transparent-overlay {
    background-color: var(--sf-success-transparent-overlay);
  }
  .bg-surface-container {
    --sf-on-surface-variant: var(--sf-on-surface-container--variant);
  }
  .active\:bg-surface-container:active {
    background-color: var(--sf-surface-container-active);
  }
  .active\:bg-on-surface:active {
    background-color: var(--sf-on-surface-active);
  }
  .active\:bg-surface-transparent:active {
    background-color: var(--sf-surface-transparent-active);
  }
  .active\:bg-primary:active {
    background-color: var(--sf-primary-active);
  }
  .active\:bg-primary-container:active {
    background-color: var(--sf-primary-container-active);
  }
  .active\:bg-primary-transparent:active {
    background-color: var(--sf-primary-transparent-active);
  }
  .active\:bg-secondary:active {
    background-color: var(--sf-secondary-active);
  }
  .active\:bg-secondary-container:active {
    background-color: var(--sf-secondary-container-active);
  }
  .active\:bg-secondary-transparent:active {
    background-color: var(--sf-secondary-transparent-active);
  }
  .active\:bg-tertiary:active {
    background-color: var(--sf-tertiary-active);
  }
  .active\:bg-tertiary-container:active {
    background-color: var(--sf-tertiary-container-active);
  }
  .active\:bg-tertiary-transparent:active {
    background-color: var(--sf-tertiary-transparent-active);
  }
  .active\:bg-error:active {
    background-color: var(--sf-error-active);
  }
  .active\:bg-error-container:active {
    background-color: var(--sf-error-container-active);
  }
  .active\:bg-error-transparent:active {
    background-color: var(--sf-error-transparent-active);
  }
  .active\:bg-warning:active {
    background-color: var(--sf-warning-active);
  }
  .active\:bg-warning-container:active {
    background-color: var(--sf-warning-container-active);
  }
  .active\:bg-warning-transparent:active {
    background-color: var(--sf-warning-transparent-active);
  }
  .active\:bg-success:active {
    background-color: var(--sf-success-active);
  }
  .active\:bg-success-container:active {
    background-color: var(--sf-success-container-active);
  }
  .active\:bg-success-transparent:active {
    background-color: var(--sf-success-transparent-active);
  }
  .hover\:bg-surface-container:hover {
    background-color: var(--sf-surface-container-hover);
  }
  .hover\:bg-on-surface:hover {
    background-color: var(--sf-on-surface-hover);
  }
  .hover\:bg-surface-transparent:hover {
    background-color: var(--sf-surface-transparent-hover);
  }
  .hover\:bg-primary:hover {
    background-color: var(--sf-primary-hover);
  }
  .hover\:bg-primary-container:hover {
    background-color: var(--sf-primary-container-hover);
  }
  .hover\:bg-primary-transparent:hover {
    background-color: var(--sf-primary-transparent-hover);
  }
  .hover\:bg-secondary:hover {
    background-color: var(--sf-secondary-hover);
  }
  .hover\:bg-secondary-container:hover {
    background-color: var(--sf-secondary-container-hover);
  }
  .hover\:bg-secondary-transparent:hover {
    background-color: var(--sf-secondary-transparent-hover);
  }
  .hover\:bg-tertiary:hover {
    background-color: var(--sf-tertiary-hover);
  }
  .hover\:bg-tertiary-container:hover {
    background-color: var(--sf-tertiary-container-hover);
  }
  .hover\:bg-tertiary-transparent:hover {
    background-color: var(--sf-tertiary-transparent-hover);
  }
  .hover\:bg-error:hover {
    background-color: var(--sf-error-hover);
  }
  .hover\:bg-error-container:hover {
    background-color: var(--sf-error-container-hover);
  }
  .hover\:bg-error-transparent:hover {
    background-color: var(--sf-error-transparent-hover);
  }
  .hover\:bg-warning:hover {
    background-color: var(--sf-warning-hover);
  }
  .hover\:bg-warning-container:hover {
    background-color: var(--sf-warning-container-hover);
  }
  .hover\:bg-warning-transparent:hover {
    background-color: var(--sf-warning-transparent-hover);
  }
  .hover\:bg-success:hover {
    background-color: var(--sf-success-hover);
  }
  .hover\:bg-success-container:hover {
    background-color: var(--sf-success-container-hover);
  }
  .hover\:bg-success-transparent:hover {
    background-color: var(--sf-success-transparent-hover);
  }
  .bg-white {
    background-color: rgb(255, 255, 255);
  }
  .bg-black {
    background-color: rgb(0, 0, 0);
  }
  .bg-gray {
    background-color: rgb(106, 115, 125);
  }
  .bg-gray-0 {
    background-color: rgb(250, 251, 252);
  }
  .bg-gray-1 {
    background-color: rgb(246, 248, 250);
  }
  .bg-gray-2 {
    background-color: rgb(225, 228, 232);
  }
  .bg-gray-3 {
    background-color: rgb(209, 213, 218);
  }
  .bg-gray-4 {
    background-color: rgb(149, 157, 165);
  }
  .bg-gray-5 {
    background-color: rgb(106, 115, 125);
  }
  .bg-gray-6 {
    background-color: rgb(88, 96, 105);
  }
  .bg-gray-7 {
    background-color: rgb(68, 77, 86);
  }
  .bg-gray-8 {
    background-color: rgb(47, 54, 61);
  }
  .bg-gray-9 {
    background-color: rgb(36, 41, 46);
  }
  .bg-red {
    background-color: rgb(215, 58, 73);
  }
  .bg-red-0 {
    background-color: rgb(255, 238, 240);
  }
  .bg-red-1 {
    background-color: rgb(255, 220, 224);
  }
  .bg-red-2 {
    background-color: rgb(253, 174, 183);
  }
  .bg-red-3 {
    background-color: rgb(249, 117, 131);
  }
  .bg-red-4 {
    background-color: rgb(234, 74, 90);
  }
  .bg-red-5 {
    background-color: rgb(215, 58, 73);
  }
  .bg-red-6 {
    background-color: rgb(203, 36, 49);
  }
  .bg-red-7 {
    background-color: rgb(179, 29, 40);
  }
  .bg-red-8 {
    background-color: rgb(158, 28, 35);
  }
  .bg-red-9 {
    background-color: rgb(134, 24, 29);
  }
  .bg-orange {
    background-color: rgb(246, 106, 10);
  }
  .bg-orange-0 {
    background-color: rgb(255, 248, 242);
  }
  .bg-orange-1 {
    background-color: rgb(255, 235, 218);
  }
  .bg-orange-2 {
    background-color: rgb(255, 209, 172);
  }
  .bg-orange-3 {
    background-color: rgb(255, 171, 112);
  }
  .bg-orange-4 {
    background-color: rgb(251, 133, 50);
  }
  .bg-orange-5 {
    background-color: rgb(246, 106, 10);
  }
  .bg-orange-6 {
    background-color: rgb(227, 98, 9);
  }
  .bg-orange-7 {
    background-color: rgb(209, 87, 4);
  }
  .bg-orange-8 {
    background-color: rgb(194, 78, 0);
  }
  .bg-orange-9 {
    background-color: rgb(160, 65, 0);
  }
  .bg-yellow {
    background-color: rgb(255, 211, 61);
  }
  .bg-yellow-0 {
    background-color: rgb(255, 253, 239);
  }
  .bg-yellow-1 {
    background-color: rgb(255, 251, 221);
  }
  .bg-yellow-2 {
    background-color: rgb(255, 245, 177);
  }
  .bg-yellow-3 {
    background-color: rgb(255, 234, 127);
  }
  .bg-yellow-4 {
    background-color: rgb(255, 223, 93);
  }
  .bg-yellow-5 {
    background-color: rgb(255, 211, 61);
  }
  .bg-yellow-6 {
    background-color: rgb(249, 197, 19);
  }
  .bg-yellow-7 {
    background-color: rgb(219, 171, 9);
  }
  .bg-yellow-8 {
    background-color: rgb(176, 136, 0);
  }
  .bg-yellow-9 {
    background-color: rgb(115, 92, 15);
  }
  .bg-green {
    background-color: rgb(40, 167, 69);
  }
  .bg-green-0 {
    background-color: rgb(240, 255, 244);
  }
  .bg-green-1 {
    background-color: rgb(220, 255, 228);
  }
  .bg-green-2 {
    background-color: rgb(190, 245, 203);
  }
  .bg-green-3 {
    background-color: rgb(133, 232, 157);
  }
  .bg-green-4 {
    background-color: rgb(52, 208, 88);
  }
  .bg-green-5 {
    background-color: rgb(40, 167, 69);
  }
  .bg-green-6 {
    background-color: rgb(34, 134, 58);
  }
  .bg-green-7 {
    background-color: rgb(23, 111, 44);
  }
  .bg-green-8 {
    background-color: rgb(22, 92, 38);
  }
  .bg-green-9 {
    background-color: rgb(20, 70, 32);
  }
  .bg-blue {
    background-color: rgb(3, 102, 214);
  }
  .bg-blue-0 {
    background-color: rgb(241, 248, 255);
  }
  .bg-blue-1 {
    background-color: rgb(219, 237, 255);
  }
  .bg-blue-2 {
    background-color: rgb(200, 225, 255);
  }
  .bg-blue-3 {
    background-color: rgb(121, 184, 255);
  }
  .bg-blue-4 {
    background-color: rgb(33, 136, 255);
  }
  .bg-blue-5 {
    background-color: rgb(3, 102, 214);
  }
  .bg-blue-6 {
    background-color: rgb(0, 92, 197);
  }
  .bg-blue-7 {
    background-color: rgb(4, 66, 137);
  }
  .bg-blue-8 {
    background-color: rgb(3, 47, 98);
  }
  .bg-blue-9 {
    background-color: rgb(5, 38, 76);
  }
  .bg-purple {
    background-color: rgb(111, 66, 193);
  }
  .bg-purple-0 {
    background-color: rgb(245, 240, 255);
  }
  .bg-purple-1 {
    background-color: rgb(230, 220, 253);
  }
  .bg-purple-2 {
    background-color: rgb(209, 188, 249);
  }
  .bg-purple-3 {
    background-color: rgb(179, 146, 240);
  }
  .bg-purple-4 {
    background-color: rgb(138, 99, 210);
  }
  .bg-purple-5 {
    background-color: rgb(111, 66, 193);
  }
  .bg-purple-6 {
    background-color: rgb(90, 50, 163);
  }
  .bg-purple-7 {
    background-color: rgb(76, 40, 136);
  }
  .bg-purple-8 {
    background-color: rgb(58, 29, 110);
  }
  .bg-purple-9 {
    background-color: rgb(41, 19, 78);
  }
  .bg-pink {
    background-color: rgb(234, 74, 170);
  }
  .bg-pink-0 {
    background-color: rgb(255, 238, 248);
  }
  .bg-pink-1 {
    background-color: rgb(254, 219, 240);
  }
  .bg-pink-2 {
    background-color: rgb(249, 179, 221);
  }
  .bg-pink-3 {
    background-color: rgb(246, 146, 206);
  }
  .bg-pink-4 {
    background-color: rgb(236, 108, 185);
  }
  .bg-pink-5 {
    background-color: rgb(234, 74, 170);
  }
  .bg-pink-6 {
    background-color: rgb(208, 53, 146);
  }
  .bg-pink-7 {
    background-color: rgb(185, 58, 134);
  }
  .bg-pink-8 {
    background-color: rgb(153, 48, 111);
  }
  .bg-pink-9 {
    background-color: rgb(109, 34, 79);
  }
}

/* docara-shell-source: runtime/utility/border-color/default/css/default.css */
@layer sf.utilities {
  .border-transparent {
    border-color: var(--sf-transparent);
  }
  .border-current {
    border-color: var(--sf-current);
  }
  .border-outline {
    border-color: var(--sf-outline);
  }
  .border-outline-variant {
    border-color: var(--sf-outline-variant);
  }
  .border-surface {
    border-color: var(--sf-surface-1);
  }
  .border-surface-0 {
    border-color: var(--sf-surface-0);
  }
  .border-surface-1 {
    border-color: var(--sf-surface-1);
  }
  .border-surface-container {
    border-color: var(--sf-surface-container);
  }
  .border-surface-overlay {
    border-color: var(--sf-surface-overlay);
  }
  .border-surface-transparent-overlay {
    border-color: var(--sf-surface-transparent-overlay);
  }
  .border-surface-inverse {
    border-color: var(--sf-surface-inverse);
  }
  .border-on-surface {
    border-color: var(--sf-on-surface);
  }
  .border-on-surface-variant {
    border-color: var(--sf-on-surface-variant);
  }
  .border-primary {
    border-color: var(--sf-outline-primary);
  }
  .border-primary-container {
    border-color: var(--sf-primary-container);
  }
  .border-primary-transparent-overlay {
    border-color: var(--sf-primary-transparent-overlay);
  }
  .border-secondary {
    border-color: var(--sf-outline-secondary);
  }
  .border-secondary-container {
    border-color: var(--sf-secondary-container);
  }
  .border-secondary-transparent-overlay {
    border-color: var(--sf-secondary-transparent-overlay);
  }
  .border-tertiary {
    border-color: var(--sf-outline-tertiary);
  }
  .border-tertiary-container {
    border-color: var(--sf-tertiary-container);
  }
  .border-tertiary-transparent-overlay {
    border-color: var(--sf-tertiary-transparent-overlay);
  }
  .border-error {
    border-color: var(--sf-outline-error);
  }
  .border-error-container {
    border-color: var(--sf-error-container);
  }
  .border-error-transparent-overlay {
    border-color: var(--sf-error-transparent-overlay);
  }
  .border-warning {
    border-color: var(--sf-outline-warning);
  }
  .border-warning-container {
    border-color: var(--sf-warning-container);
  }
  .border-warning-transparent-overlay {
    border-color: var(--sf-warning-transparent-overlay);
  }
  .border-success {
    border-color: var(--sf-outline-success);
  }
  .border-success-container {
    border-color: var(--sf-success-container);
  }
  .border-success-transparent-overlay {
    border-color: var(--sf-success-transparent-overlay);
  }
  .border-info {
    border-color: var(--sf-outline-info);
  }
  .border-info-container {
    border-color: var(--sf-info-container);
  }
  .border-white {
    border-color: rgb(255, 255, 255);
  }
  .border-black {
    border-color: rgb(0, 0, 0);
  }
  .border-gray {
    border-color: rgb(106, 115, 125);
  }
  .border-gray-0 {
    border-color: rgb(250, 251, 252);
  }
  .border-gray-1 {
    border-color: rgb(246, 248, 250);
  }
  .border-gray-2 {
    border-color: rgb(225, 228, 232);
  }
  .border-gray-3 {
    border-color: rgb(209, 213, 218);
  }
  .border-gray-4 {
    border-color: rgb(149, 157, 165);
  }
  .border-gray-5 {
    border-color: rgb(106, 115, 125);
  }
  .border-gray-6 {
    border-color: rgb(88, 96, 105);
  }
  .border-gray-7 {
    border-color: rgb(68, 77, 86);
  }
  .border-gray-8 {
    border-color: rgb(47, 54, 61);
  }
  .border-gray-9 {
    border-color: rgb(36, 41, 46);
  }
  .border-red {
    border-color: rgb(215, 58, 73);
  }
  .border-red-0 {
    border-color: rgb(255, 238, 240);
  }
  .border-red-1 {
    border-color: rgb(255, 220, 224);
  }
  .border-red-2 {
    border-color: rgb(253, 174, 183);
  }
  .border-red-3 {
    border-color: rgb(249, 117, 131);
  }
  .border-red-4 {
    border-color: rgb(234, 74, 90);
  }
  .border-red-5 {
    border-color: rgb(215, 58, 73);
  }
  .border-red-6 {
    border-color: rgb(203, 36, 49);
  }
  .border-red-7 {
    border-color: rgb(179, 29, 40);
  }
  .border-red-8 {
    border-color: rgb(158, 28, 35);
  }
  .border-red-9 {
    border-color: rgb(134, 24, 29);
  }
  .border-orange {
    border-color: rgb(246, 106, 10);
  }
  .border-orange-0 {
    border-color: rgb(255, 248, 242);
  }
  .border-orange-1 {
    border-color: rgb(255, 235, 218);
  }
  .border-orange-2 {
    border-color: rgb(255, 209, 172);
  }
  .border-orange-3 {
    border-color: rgb(255, 171, 112);
  }
  .border-orange-4 {
    border-color: rgb(251, 133, 50);
  }
  .border-orange-5 {
    border-color: rgb(246, 106, 10);
  }
  .border-orange-6 {
    border-color: rgb(227, 98, 9);
  }
  .border-orange-7 {
    border-color: rgb(209, 87, 4);
  }
  .border-orange-8 {
    border-color: rgb(194, 78, 0);
  }
  .border-orange-9 {
    border-color: rgb(160, 65, 0);
  }
  .border-yellow {
    border-color: rgb(255, 211, 61);
  }
  .border-yellow-0 {
    border-color: rgb(255, 253, 239);
  }
  .border-yellow-1 {
    border-color: rgb(255, 251, 221);
  }
  .border-yellow-2 {
    border-color: rgb(255, 245, 177);
  }
  .border-yellow-3 {
    border-color: rgb(255, 234, 127);
  }
  .border-yellow-4 {
    border-color: rgb(255, 223, 93);
  }
  .border-yellow-5 {
    border-color: rgb(255, 211, 61);
  }
  .border-yellow-6 {
    border-color: rgb(249, 197, 19);
  }
  .border-yellow-7 {
    border-color: rgb(219, 171, 9);
  }
  .border-yellow-8 {
    border-color: rgb(176, 136, 0);
  }
  .border-yellow-9 {
    border-color: rgb(115, 92, 15);
  }
  .border-green {
    border-color: rgb(40, 167, 69);
  }
  .border-green-0 {
    border-color: rgb(240, 255, 244);
  }
  .border-green-1 {
    border-color: rgb(220, 255, 228);
  }
  .border-green-2 {
    border-color: rgb(190, 245, 203);
  }
  .border-green-3 {
    border-color: rgb(133, 232, 157);
  }
  .border-green-4 {
    border-color: rgb(52, 208, 88);
  }
  .border-green-5 {
    border-color: rgb(40, 167, 69);
  }
  .border-green-6 {
    border-color: rgb(34, 134, 58);
  }
  .border-green-7 {
    border-color: rgb(23, 111, 44);
  }
  .border-green-8 {
    border-color: rgb(22, 92, 38);
  }
  .border-green-9 {
    border-color: rgb(20, 70, 32);
  }
  .border-blue {
    border-color: rgb(3, 102, 214);
  }
  .border-blue-0 {
    border-color: rgb(241, 248, 255);
  }
  .border-blue-1 {
    border-color: rgb(219, 237, 255);
  }
  .border-blue-2 {
    border-color: rgb(200, 225, 255);
  }
  .border-blue-3 {
    border-color: rgb(121, 184, 255);
  }
  .border-blue-4 {
    border-color: rgb(33, 136, 255);
  }
  .border-blue-5 {
    border-color: rgb(3, 102, 214);
  }
  .border-blue-6 {
    border-color: rgb(0, 92, 197);
  }
  .border-blue-7 {
    border-color: rgb(4, 66, 137);
  }
  .border-blue-8 {
    border-color: rgb(3, 47, 98);
  }
  .border-blue-9 {
    border-color: rgb(5, 38, 76);
  }
  .border-purple {
    border-color: rgb(111, 66, 193);
  }
  .border-purple-0 {
    border-color: rgb(245, 240, 255);
  }
  .border-purple-1 {
    border-color: rgb(230, 220, 253);
  }
  .border-purple-2 {
    border-color: rgb(209, 188, 249);
  }
  .border-purple-3 {
    border-color: rgb(179, 146, 240);
  }
  .border-purple-4 {
    border-color: rgb(138, 99, 210);
  }
  .border-purple-5 {
    border-color: rgb(111, 66, 193);
  }
  .border-purple-6 {
    border-color: rgb(90, 50, 163);
  }
  .border-purple-7 {
    border-color: rgb(76, 40, 136);
  }
  .border-purple-8 {
    border-color: rgb(58, 29, 110);
  }
  .border-purple-9 {
    border-color: rgb(41, 19, 78);
  }
  .border-pink {
    border-color: rgb(234, 74, 170);
  }
  .border-pink-0 {
    border-color: rgb(255, 238, 248);
  }
  .border-pink-1 {
    border-color: rgb(254, 219, 240);
  }
  .border-pink-2 {
    border-color: rgb(249, 179, 221);
  }
  .border-pink-3 {
    border-color: rgb(246, 146, 206);
  }
  .border-pink-4 {
    border-color: rgb(236, 108, 185);
  }
  .border-pink-5 {
    border-color: rgb(234, 74, 170);
  }
  .border-pink-6 {
    border-color: rgb(208, 53, 146);
  }
  .border-pink-7 {
    border-color: rgb(185, 58, 134);
  }
  .border-pink-8 {
    border-color: rgb(153, 48, 111);
  }
  .border-pink-9 {
    border-color: rgb(109, 34, 79);
  }
}

/* docara-shell-source: runtime/utility/border-radius/default/css/default.css */
@layer sf.utilities {
  .radius-0 {
    border-radius: var(--sf-radius-0);
  }
  .radius-1\/3 {
    border-radius: var(--sf-radius-1\/3);
  }
  .radius-1\/2 {
    border-radius: var(--sf-radius-1\/2);
  }
  .radius-1 {
    border-radius: var(--sf-radius-1);
  }
  .radius-2 {
    border-radius: var(--sf-radius-2);
  }
  .radius-3 {
    border-radius: var(--sf-radius-3);
  }
  .radius-4 {
    border-radius: var(--sf-radius-4);
  }
  .radius-default {
    border-radius: var(--sf-radius-default);
  }
  .radius-ui {
    border-radius: var(--sf-radius--ui);
  }
  .radius-surface {
    border-radius: var(--sf-radius--surface);
  }
  .radius-square {
    border-radius: var(--sf-radius-square);
  }
  .radius-rounded {
    border-radius: var(--sf-radius-rounded);
  }
  .radius-round {
    border-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-0 {
    border-top-left-radius: var(--sf-radius-0);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-0 {
    border-top-left-radius: var(--sf-radius-0);
    }
  }
  .radius-top-0:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-0 {
    border-top-right-radius: var(--sf-radius-0);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-0 {
    border-top-right-radius: var(--sf-radius-0);
    }
  }
  .radius-top-0:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-0 {
    border-top-right-radius: var(--sf-radius-0);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-0 {
    border-top-right-radius: var(--sf-radius-0);
    }
  }
  .radius-top-0:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-0 {
    border-top-left-radius: var(--sf-radius-0);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-0 {
    border-top-left-radius: var(--sf-radius-0);
    }
  }
  .radius-top-0:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-0);
  }
  .radius-top-0 {
    border-start-start-radius: var(--sf-radius-0);
    border-start-end-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-0 {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-0 {
    border-bottom-left-radius: var(--sf-radius-0);
    }
  }
  .radius-bottom-0:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-0 {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-0 {
    border-bottom-right-radius: var(--sf-radius-0);
    }
  }
  .radius-bottom-0:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-0 {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-0 {
    border-bottom-right-radius: var(--sf-radius-0);
    }
  }
  .radius-bottom-0:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-0 {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-0 {
    border-bottom-left-radius: var(--sf-radius-0);
    }
  }
  .radius-bottom-0:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  .radius-bottom-0 {
    border-end-start-radius: var(--sf-radius-0);
    border-end-end-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-0 {
    border-top-left-radius: var(--sf-radius-0);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-0 {
    border-top-left-radius: var(--sf-radius-0);
    }
  }
  .radius-inline-start-0:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-0 {
    border-top-right-radius: var(--sf-radius-0);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-0 {
    border-top-right-radius: var(--sf-radius-0);
    }
  }
  .radius-inline-start-0:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-0 {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-0 {
    border-bottom-left-radius: var(--sf-radius-0);
    }
  }
  .radius-inline-start-0:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-0 {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-0 {
    border-bottom-right-radius: var(--sf-radius-0);
    }
  }
  .radius-inline-start-0:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  .radius-inline-start-0 {
    border-start-start-radius: var(--sf-radius-0);
    border-end-start-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-0 {
    border-top-right-radius: var(--sf-radius-0);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-0 {
    border-top-right-radius: var(--sf-radius-0);
    }
  }
  .radius-inline-end-0:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-0 {
    border-top-left-radius: var(--sf-radius-0);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-0 {
    border-top-left-radius: var(--sf-radius-0);
    }
  }
  .radius-inline-end-0:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-0 {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-0 {
    border-bottom-right-radius: var(--sf-radius-0);
    }
  }
  .radius-inline-end-0:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-0 {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-0 {
    border-bottom-left-radius: var(--sf-radius-0);
    }
  }
  .radius-inline-end-0:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  .radius-inline-end-0 {
    border-start-end-radius: var(--sf-radius-0);
    border-end-end-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-0 {
    border-top-left-radius: var(--sf-radius-0);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-0 {
    border-top-left-radius: var(--sf-radius-0);
    }
  }
  .radius-top-inline-start-0:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-0 {
    border-top-right-radius: var(--sf-radius-0);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-0 {
    border-top-right-radius: var(--sf-radius-0);
    }
  }
  .radius-top-inline-start-0:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-0);
  }
  .radius-top-inline-start-0 {
    border-start-start-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-0 {
    border-top-right-radius: var(--sf-radius-0);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-0 {
    border-top-right-radius: var(--sf-radius-0);
    }
  }
  .radius-top-inline-end-0:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-0 {
    border-top-left-radius: var(--sf-radius-0);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-0 {
    border-top-left-radius: var(--sf-radius-0);
    }
  }
  .radius-top-inline-end-0:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-0);
  }
  .radius-top-inline-end-0 {
    border-start-end-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-0 {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-0 {
    border-bottom-left-radius: var(--sf-radius-0);
    }
  }
  .radius-bottom-inline-start-0:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-0 {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-0 {
    border-bottom-right-radius: var(--sf-radius-0);
    }
  }
  .radius-bottom-inline-start-0:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  .radius-bottom-inline-start-0 {
    border-end-start-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-0 {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-0 {
    border-bottom-right-radius: var(--sf-radius-0);
    }
  }
  .radius-bottom-inline-end-0:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-0 {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-0 {
    border-bottom-left-radius: var(--sf-radius-0);
    }
  }
  .radius-bottom-inline-end-0:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  .radius-bottom-inline-end-0 {
    border-end-end-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-top-1\/3:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-top-1\/3:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-top-1\/3:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-top-1\/3:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  .radius-top-1\/3 {
    border-start-start-radius: var(--sf-radius-1\/3);
    border-start-end-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-bottom-1\/3:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-bottom-1\/3:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-bottom-1\/3:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-bottom-1\/3:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  .radius-bottom-1\/3 {
    border-end-start-radius: var(--sf-radius-1\/3);
    border-end-end-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-inline-start-1\/3:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-inline-start-1\/3:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-inline-start-1\/3:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-inline-start-1\/3:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  .radius-inline-start-1\/3 {
    border-start-start-radius: var(--sf-radius-1\/3);
    border-end-start-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-inline-end-1\/3:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-inline-end-1\/3:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-inline-end-1\/3:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-inline-end-1\/3:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  .radius-inline-end-1\/3 {
    border-start-end-radius: var(--sf-radius-1\/3);
    border-end-end-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-top-inline-start-1\/3:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-top-inline-start-1\/3:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  .radius-top-inline-start-1\/3 {
    border-start-start-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-top-inline-end-1\/3:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-top-inline-end-1\/3:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  .radius-top-inline-end-1\/3 {
    border-start-end-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-bottom-inline-start-1\/3:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-bottom-inline-start-1\/3:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  .radius-bottom-inline-start-1\/3 {
    border-end-start-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-bottom-inline-end-1\/3:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-bottom-inline-end-1\/3:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  .radius-bottom-inline-end-1\/3 {
    border-end-end-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-top-1\/2:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-top-1\/2:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-top-1\/2:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-top-1\/2:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  .radius-top-1\/2 {
    border-start-start-radius: var(--sf-radius-1\/2);
    border-start-end-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-bottom-1\/2:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-bottom-1\/2:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-bottom-1\/2:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-bottom-1\/2:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  .radius-bottom-1\/2 {
    border-end-start-radius: var(--sf-radius-1\/2);
    border-end-end-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-inline-start-1\/2:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-inline-start-1\/2:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-inline-start-1\/2:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-inline-start-1\/2:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  .radius-inline-start-1\/2 {
    border-start-start-radius: var(--sf-radius-1\/2);
    border-end-start-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-inline-end-1\/2:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-inline-end-1\/2:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-inline-end-1\/2:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-inline-end-1\/2:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  .radius-inline-end-1\/2 {
    border-start-end-radius: var(--sf-radius-1\/2);
    border-end-end-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-top-inline-start-1\/2:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-top-inline-start-1\/2:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  .radius-top-inline-start-1\/2 {
    border-start-start-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-top-inline-end-1\/2:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-top-inline-end-1\/2:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  .radius-top-inline-end-1\/2 {
    border-start-end-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-bottom-inline-start-1\/2:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-bottom-inline-start-1\/2:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  .radius-bottom-inline-start-1\/2 {
    border-end-start-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-bottom-inline-end-1\/2:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-bottom-inline-end-1\/2:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  .radius-bottom-inline-end-1\/2 {
    border-end-end-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-1 {
    border-top-left-radius: var(--sf-radius-1);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-1 {
    border-top-left-radius: var(--sf-radius-1);
    }
  }
  .radius-top-1:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-1 {
    border-top-right-radius: var(--sf-radius-1);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-1 {
    border-top-right-radius: var(--sf-radius-1);
    }
  }
  .radius-top-1:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-1 {
    border-top-right-radius: var(--sf-radius-1);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-1 {
    border-top-right-radius: var(--sf-radius-1);
    }
  }
  .radius-top-1:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-1 {
    border-top-left-radius: var(--sf-radius-1);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-1 {
    border-top-left-radius: var(--sf-radius-1);
    }
  }
  .radius-top-1:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-1);
  }
  .radius-top-1 {
    border-start-start-radius: var(--sf-radius-1);
    border-start-end-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-1 {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-1 {
    border-bottom-left-radius: var(--sf-radius-1);
    }
  }
  .radius-bottom-1:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-1 {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-1 {
    border-bottom-right-radius: var(--sf-radius-1);
    }
  }
  .radius-bottom-1:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-1 {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-1 {
    border-bottom-right-radius: var(--sf-radius-1);
    }
  }
  .radius-bottom-1:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-1 {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-1 {
    border-bottom-left-radius: var(--sf-radius-1);
    }
  }
  .radius-bottom-1:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  .radius-bottom-1 {
    border-end-start-radius: var(--sf-radius-1);
    border-end-end-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-1 {
    border-top-left-radius: var(--sf-radius-1);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-1 {
    border-top-left-radius: var(--sf-radius-1);
    }
  }
  .radius-inline-start-1:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-1 {
    border-top-right-radius: var(--sf-radius-1);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-1 {
    border-top-right-radius: var(--sf-radius-1);
    }
  }
  .radius-inline-start-1:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-1 {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-1 {
    border-bottom-left-radius: var(--sf-radius-1);
    }
  }
  .radius-inline-start-1:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-1 {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-1 {
    border-bottom-right-radius: var(--sf-radius-1);
    }
  }
  .radius-inline-start-1:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  .radius-inline-start-1 {
    border-start-start-radius: var(--sf-radius-1);
    border-end-start-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-1 {
    border-top-right-radius: var(--sf-radius-1);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-1 {
    border-top-right-radius: var(--sf-radius-1);
    }
  }
  .radius-inline-end-1:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-1 {
    border-top-left-radius: var(--sf-radius-1);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-1 {
    border-top-left-radius: var(--sf-radius-1);
    }
  }
  .radius-inline-end-1:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-1 {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-1 {
    border-bottom-right-radius: var(--sf-radius-1);
    }
  }
  .radius-inline-end-1:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-1 {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-1 {
    border-bottom-left-radius: var(--sf-radius-1);
    }
  }
  .radius-inline-end-1:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  .radius-inline-end-1 {
    border-start-end-radius: var(--sf-radius-1);
    border-end-end-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-1 {
    border-top-left-radius: var(--sf-radius-1);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-1 {
    border-top-left-radius: var(--sf-radius-1);
    }
  }
  .radius-top-inline-start-1:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-1 {
    border-top-right-radius: var(--sf-radius-1);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-1 {
    border-top-right-radius: var(--sf-radius-1);
    }
  }
  .radius-top-inline-start-1:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-1);
  }
  .radius-top-inline-start-1 {
    border-start-start-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-1 {
    border-top-right-radius: var(--sf-radius-1);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-1 {
    border-top-right-radius: var(--sf-radius-1);
    }
  }
  .radius-top-inline-end-1:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-1 {
    border-top-left-radius: var(--sf-radius-1);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-1 {
    border-top-left-radius: var(--sf-radius-1);
    }
  }
  .radius-top-inline-end-1:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-1);
  }
  .radius-top-inline-end-1 {
    border-start-end-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-1 {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-1 {
    border-bottom-left-radius: var(--sf-radius-1);
    }
  }
  .radius-bottom-inline-start-1:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-1 {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-1 {
    border-bottom-right-radius: var(--sf-radius-1);
    }
  }
  .radius-bottom-inline-start-1:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  .radius-bottom-inline-start-1 {
    border-end-start-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-1 {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-1 {
    border-bottom-right-radius: var(--sf-radius-1);
    }
  }
  .radius-bottom-inline-end-1:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-1 {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-1 {
    border-bottom-left-radius: var(--sf-radius-1);
    }
  }
  .radius-bottom-inline-end-1:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  .radius-bottom-inline-end-1 {
    border-end-end-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-2 {
    border-top-left-radius: var(--sf-radius-2);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-2 {
    border-top-left-radius: var(--sf-radius-2);
    }
  }
  .radius-top-2:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-2 {
    border-top-right-radius: var(--sf-radius-2);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-2 {
    border-top-right-radius: var(--sf-radius-2);
    }
  }
  .radius-top-2:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-2 {
    border-top-right-radius: var(--sf-radius-2);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-2 {
    border-top-right-radius: var(--sf-radius-2);
    }
  }
  .radius-top-2:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-2 {
    border-top-left-radius: var(--sf-radius-2);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-2 {
    border-top-left-radius: var(--sf-radius-2);
    }
  }
  .radius-top-2:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-2);
  }
  .radius-top-2 {
    border-start-start-radius: var(--sf-radius-2);
    border-start-end-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-2 {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-2 {
    border-bottom-left-radius: var(--sf-radius-2);
    }
  }
  .radius-bottom-2:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-2 {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-2 {
    border-bottom-right-radius: var(--sf-radius-2);
    }
  }
  .radius-bottom-2:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-2 {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-2 {
    border-bottom-right-radius: var(--sf-radius-2);
    }
  }
  .radius-bottom-2:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-2 {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-2 {
    border-bottom-left-radius: var(--sf-radius-2);
    }
  }
  .radius-bottom-2:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  .radius-bottom-2 {
    border-end-start-radius: var(--sf-radius-2);
    border-end-end-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-2 {
    border-top-left-radius: var(--sf-radius-2);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-2 {
    border-top-left-radius: var(--sf-radius-2);
    }
  }
  .radius-inline-start-2:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-2 {
    border-top-right-radius: var(--sf-radius-2);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-2 {
    border-top-right-radius: var(--sf-radius-2);
    }
  }
  .radius-inline-start-2:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-2 {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-2 {
    border-bottom-left-radius: var(--sf-radius-2);
    }
  }
  .radius-inline-start-2:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-2 {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-2 {
    border-bottom-right-radius: var(--sf-radius-2);
    }
  }
  .radius-inline-start-2:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  .radius-inline-start-2 {
    border-start-start-radius: var(--sf-radius-2);
    border-end-start-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-2 {
    border-top-right-radius: var(--sf-radius-2);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-2 {
    border-top-right-radius: var(--sf-radius-2);
    }
  }
  .radius-inline-end-2:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-2 {
    border-top-left-radius: var(--sf-radius-2);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-2 {
    border-top-left-radius: var(--sf-radius-2);
    }
  }
  .radius-inline-end-2:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-2 {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-2 {
    border-bottom-right-radius: var(--sf-radius-2);
    }
  }
  .radius-inline-end-2:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-2 {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-2 {
    border-bottom-left-radius: var(--sf-radius-2);
    }
  }
  .radius-inline-end-2:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  .radius-inline-end-2 {
    border-start-end-radius: var(--sf-radius-2);
    border-end-end-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-2 {
    border-top-left-radius: var(--sf-radius-2);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-2 {
    border-top-left-radius: var(--sf-radius-2);
    }
  }
  .radius-top-inline-start-2:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-2 {
    border-top-right-radius: var(--sf-radius-2);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-2 {
    border-top-right-radius: var(--sf-radius-2);
    }
  }
  .radius-top-inline-start-2:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-2);
  }
  .radius-top-inline-start-2 {
    border-start-start-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-2 {
    border-top-right-radius: var(--sf-radius-2);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-2 {
    border-top-right-radius: var(--sf-radius-2);
    }
  }
  .radius-top-inline-end-2:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-2 {
    border-top-left-radius: var(--sf-radius-2);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-2 {
    border-top-left-radius: var(--sf-radius-2);
    }
  }
  .radius-top-inline-end-2:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-2);
  }
  .radius-top-inline-end-2 {
    border-start-end-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-2 {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-2 {
    border-bottom-left-radius: var(--sf-radius-2);
    }
  }
  .radius-bottom-inline-start-2:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-2 {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-2 {
    border-bottom-right-radius: var(--sf-radius-2);
    }
  }
  .radius-bottom-inline-start-2:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  .radius-bottom-inline-start-2 {
    border-end-start-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-2 {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-2 {
    border-bottom-right-radius: var(--sf-radius-2);
    }
  }
  .radius-bottom-inline-end-2:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-2 {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-2 {
    border-bottom-left-radius: var(--sf-radius-2);
    }
  }
  .radius-bottom-inline-end-2:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  .radius-bottom-inline-end-2 {
    border-end-end-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-3 {
    border-top-left-radius: var(--sf-radius-3);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-3 {
    border-top-left-radius: var(--sf-radius-3);
    }
  }
  .radius-top-3:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-3 {
    border-top-right-radius: var(--sf-radius-3);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-3 {
    border-top-right-radius: var(--sf-radius-3);
    }
  }
  .radius-top-3:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-3 {
    border-top-right-radius: var(--sf-radius-3);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-3 {
    border-top-right-radius: var(--sf-radius-3);
    }
  }
  .radius-top-3:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-3 {
    border-top-left-radius: var(--sf-radius-3);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-3 {
    border-top-left-radius: var(--sf-radius-3);
    }
  }
  .radius-top-3:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-3);
  }
  .radius-top-3 {
    border-start-start-radius: var(--sf-radius-3);
    border-start-end-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-3 {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-3 {
    border-bottom-left-radius: var(--sf-radius-3);
    }
  }
  .radius-bottom-3:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-3 {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-3 {
    border-bottom-right-radius: var(--sf-radius-3);
    }
  }
  .radius-bottom-3:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-3 {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-3 {
    border-bottom-right-radius: var(--sf-radius-3);
    }
  }
  .radius-bottom-3:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-3 {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-3 {
    border-bottom-left-radius: var(--sf-radius-3);
    }
  }
  .radius-bottom-3:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  .radius-bottom-3 {
    border-end-start-radius: var(--sf-radius-3);
    border-end-end-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-3 {
    border-top-left-radius: var(--sf-radius-3);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-3 {
    border-top-left-radius: var(--sf-radius-3);
    }
  }
  .radius-inline-start-3:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-3 {
    border-top-right-radius: var(--sf-radius-3);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-3 {
    border-top-right-radius: var(--sf-radius-3);
    }
  }
  .radius-inline-start-3:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-3 {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-3 {
    border-bottom-left-radius: var(--sf-radius-3);
    }
  }
  .radius-inline-start-3:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-3 {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-3 {
    border-bottom-right-radius: var(--sf-radius-3);
    }
  }
  .radius-inline-start-3:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  .radius-inline-start-3 {
    border-start-start-radius: var(--sf-radius-3);
    border-end-start-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-3 {
    border-top-right-radius: var(--sf-radius-3);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-3 {
    border-top-right-radius: var(--sf-radius-3);
    }
  }
  .radius-inline-end-3:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-3 {
    border-top-left-radius: var(--sf-radius-3);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-3 {
    border-top-left-radius: var(--sf-radius-3);
    }
  }
  .radius-inline-end-3:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-3 {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-3 {
    border-bottom-right-radius: var(--sf-radius-3);
    }
  }
  .radius-inline-end-3:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-3 {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-3 {
    border-bottom-left-radius: var(--sf-radius-3);
    }
  }
  .radius-inline-end-3:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  .radius-inline-end-3 {
    border-start-end-radius: var(--sf-radius-3);
    border-end-end-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-3 {
    border-top-left-radius: var(--sf-radius-3);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-3 {
    border-top-left-radius: var(--sf-radius-3);
    }
  }
  .radius-top-inline-start-3:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-3 {
    border-top-right-radius: var(--sf-radius-3);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-3 {
    border-top-right-radius: var(--sf-radius-3);
    }
  }
  .radius-top-inline-start-3:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-3);
  }
  .radius-top-inline-start-3 {
    border-start-start-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-3 {
    border-top-right-radius: var(--sf-radius-3);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-3 {
    border-top-right-radius: var(--sf-radius-3);
    }
  }
  .radius-top-inline-end-3:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-3 {
    border-top-left-radius: var(--sf-radius-3);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-3 {
    border-top-left-radius: var(--sf-radius-3);
    }
  }
  .radius-top-inline-end-3:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-3);
  }
  .radius-top-inline-end-3 {
    border-start-end-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-3 {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-3 {
    border-bottom-left-radius: var(--sf-radius-3);
    }
  }
  .radius-bottom-inline-start-3:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-3 {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-3 {
    border-bottom-right-radius: var(--sf-radius-3);
    }
  }
  .radius-bottom-inline-start-3:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  .radius-bottom-inline-start-3 {
    border-end-start-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-3 {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-3 {
    border-bottom-right-radius: var(--sf-radius-3);
    }
  }
  .radius-bottom-inline-end-3:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-3 {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-3 {
    border-bottom-left-radius: var(--sf-radius-3);
    }
  }
  .radius-bottom-inline-end-3:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  .radius-bottom-inline-end-3 {
    border-end-end-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-4 {
    border-top-left-radius: var(--sf-radius-4);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-4 {
    border-top-left-radius: var(--sf-radius-4);
    }
  }
  .radius-top-4:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-4 {
    border-top-right-radius: var(--sf-radius-4);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-4 {
    border-top-right-radius: var(--sf-radius-4);
    }
  }
  .radius-top-4:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-4 {
    border-top-right-radius: var(--sf-radius-4);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-4 {
    border-top-right-radius: var(--sf-radius-4);
    }
  }
  .radius-top-4:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-4 {
    border-top-left-radius: var(--sf-radius-4);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-4 {
    border-top-left-radius: var(--sf-radius-4);
    }
  }
  .radius-top-4:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-4);
  }
  .radius-top-4 {
    border-start-start-radius: var(--sf-radius-4);
    border-start-end-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-4 {
    border-bottom-left-radius: var(--sf-radius-4);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-4 {
    border-bottom-left-radius: var(--sf-radius-4);
    }
  }
  .radius-bottom-4:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-4 {
    border-bottom-right-radius: var(--sf-radius-4);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-4 {
    border-bottom-right-radius: var(--sf-radius-4);
    }
  }
  .radius-bottom-4:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-4 {
    border-bottom-right-radius: var(--sf-radius-4);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-4 {
    border-bottom-right-radius: var(--sf-radius-4);
    }
  }
  .radius-bottom-4:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-4 {
    border-bottom-left-radius: var(--sf-radius-4);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-4 {
    border-bottom-left-radius: var(--sf-radius-4);
    }
  }
  .radius-bottom-4:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-4);
  }
  .radius-bottom-4 {
    border-end-start-radius: var(--sf-radius-4);
    border-end-end-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-4 {
    border-top-left-radius: var(--sf-radius-4);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-4 {
    border-top-left-radius: var(--sf-radius-4);
    }
  }
  .radius-inline-start-4:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-4 {
    border-top-right-radius: var(--sf-radius-4);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-4 {
    border-top-right-radius: var(--sf-radius-4);
    }
  }
  .radius-inline-start-4:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-4 {
    border-bottom-left-radius: var(--sf-radius-4);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-4 {
    border-bottom-left-radius: var(--sf-radius-4);
    }
  }
  .radius-inline-start-4:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-4 {
    border-bottom-right-radius: var(--sf-radius-4);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-4 {
    border-bottom-right-radius: var(--sf-radius-4);
    }
  }
  .radius-inline-start-4:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-4);
  }
  .radius-inline-start-4 {
    border-start-start-radius: var(--sf-radius-4);
    border-end-start-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-4 {
    border-top-right-radius: var(--sf-radius-4);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-4 {
    border-top-right-radius: var(--sf-radius-4);
    }
  }
  .radius-inline-end-4:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-4 {
    border-top-left-radius: var(--sf-radius-4);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-4 {
    border-top-left-radius: var(--sf-radius-4);
    }
  }
  .radius-inline-end-4:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-4 {
    border-bottom-right-radius: var(--sf-radius-4);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-4 {
    border-bottom-right-radius: var(--sf-radius-4);
    }
  }
  .radius-inline-end-4:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-4 {
    border-bottom-left-radius: var(--sf-radius-4);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-4 {
    border-bottom-left-radius: var(--sf-radius-4);
    }
  }
  .radius-inline-end-4:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-4);
  }
  .radius-inline-end-4 {
    border-start-end-radius: var(--sf-radius-4);
    border-end-end-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-4 {
    border-top-left-radius: var(--sf-radius-4);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-4 {
    border-top-left-radius: var(--sf-radius-4);
    }
  }
  .radius-top-inline-start-4:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-4 {
    border-top-right-radius: var(--sf-radius-4);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-4 {
    border-top-right-radius: var(--sf-radius-4);
    }
  }
  .radius-top-inline-start-4:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-4);
  }
  .radius-top-inline-start-4 {
    border-start-start-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-4 {
    border-top-right-radius: var(--sf-radius-4);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-4 {
    border-top-right-radius: var(--sf-radius-4);
    }
  }
  .radius-top-inline-end-4:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-4 {
    border-top-left-radius: var(--sf-radius-4);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-4 {
    border-top-left-radius: var(--sf-radius-4);
    }
  }
  .radius-top-inline-end-4:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-4);
  }
  .radius-top-inline-end-4 {
    border-start-end-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-4 {
    border-bottom-left-radius: var(--sf-radius-4);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-4 {
    border-bottom-left-radius: var(--sf-radius-4);
    }
  }
  .radius-bottom-inline-start-4:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-4 {
    border-bottom-right-radius: var(--sf-radius-4);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-4 {
    border-bottom-right-radius: var(--sf-radius-4);
    }
  }
  .radius-bottom-inline-start-4:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-4);
  }
  .radius-bottom-inline-start-4 {
    border-end-start-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-4 {
    border-bottom-right-radius: var(--sf-radius-4);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-4 {
    border-bottom-right-radius: var(--sf-radius-4);
    }
  }
  .radius-bottom-inline-end-4:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-4 {
    border-bottom-left-radius: var(--sf-radius-4);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-4 {
    border-bottom-left-radius: var(--sf-radius-4);
    }
  }
  .radius-bottom-inline-end-4:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-4);
  }
  .radius-bottom-inline-end-4 {
    border-end-end-radius: var(--sf-radius-4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-default {
    border-top-left-radius: var(--sf-radius-default);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-default {
    border-top-left-radius: var(--sf-radius-default);
    }
  }
  .radius-top-default:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-default {
    border-top-right-radius: var(--sf-radius-default);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-default {
    border-top-right-radius: var(--sf-radius-default);
    }
  }
  .radius-top-default:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-default {
    border-top-right-radius: var(--sf-radius-default);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-default {
    border-top-right-radius: var(--sf-radius-default);
    }
  }
  .radius-top-default:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-default {
    border-top-left-radius: var(--sf-radius-default);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-default {
    border-top-left-radius: var(--sf-radius-default);
    }
  }
  .radius-top-default:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-default);
  }
  .radius-top-default {
    border-start-start-radius: var(--sf-radius-default);
    border-start-end-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-default {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-default {
    border-bottom-left-radius: var(--sf-radius-default);
    }
  }
  .radius-bottom-default:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-default {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-default {
    border-bottom-right-radius: var(--sf-radius-default);
    }
  }
  .radius-bottom-default:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-default {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-default {
    border-bottom-right-radius: var(--sf-radius-default);
    }
  }
  .radius-bottom-default:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-default {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-default {
    border-bottom-left-radius: var(--sf-radius-default);
    }
  }
  .radius-bottom-default:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  .radius-bottom-default {
    border-end-start-radius: var(--sf-radius-default);
    border-end-end-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-default {
    border-top-left-radius: var(--sf-radius-default);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-default {
    border-top-left-radius: var(--sf-radius-default);
    }
  }
  .radius-inline-start-default:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-default {
    border-top-right-radius: var(--sf-radius-default);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-default {
    border-top-right-radius: var(--sf-radius-default);
    }
  }
  .radius-inline-start-default:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-default {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-default {
    border-bottom-left-radius: var(--sf-radius-default);
    }
  }
  .radius-inline-start-default:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-default {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-default {
    border-bottom-right-radius: var(--sf-radius-default);
    }
  }
  .radius-inline-start-default:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  .radius-inline-start-default {
    border-start-start-radius: var(--sf-radius-default);
    border-end-start-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-default {
    border-top-right-radius: var(--sf-radius-default);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-default {
    border-top-right-radius: var(--sf-radius-default);
    }
  }
  .radius-inline-end-default:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-default {
    border-top-left-radius: var(--sf-radius-default);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-default {
    border-top-left-radius: var(--sf-radius-default);
    }
  }
  .radius-inline-end-default:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-default {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-default {
    border-bottom-right-radius: var(--sf-radius-default);
    }
  }
  .radius-inline-end-default:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-default {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-default {
    border-bottom-left-radius: var(--sf-radius-default);
    }
  }
  .radius-inline-end-default:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  .radius-inline-end-default {
    border-start-end-radius: var(--sf-radius-default);
    border-end-end-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-default {
    border-top-left-radius: var(--sf-radius-default);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-default {
    border-top-left-radius: var(--sf-radius-default);
    }
  }
  .radius-top-inline-start-default:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-default {
    border-top-right-radius: var(--sf-radius-default);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-default {
    border-top-right-radius: var(--sf-radius-default);
    }
  }
  .radius-top-inline-start-default:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-default);
  }
  .radius-top-inline-start-default {
    border-start-start-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-default {
    border-top-right-radius: var(--sf-radius-default);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-default {
    border-top-right-radius: var(--sf-radius-default);
    }
  }
  .radius-top-inline-end-default:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-default {
    border-top-left-radius: var(--sf-radius-default);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-default {
    border-top-left-radius: var(--sf-radius-default);
    }
  }
  .radius-top-inline-end-default:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-default);
  }
  .radius-top-inline-end-default {
    border-start-end-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-default {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-default {
    border-bottom-left-radius: var(--sf-radius-default);
    }
  }
  .radius-bottom-inline-start-default:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-default {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-default {
    border-bottom-right-radius: var(--sf-radius-default);
    }
  }
  .radius-bottom-inline-start-default:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  .radius-bottom-inline-start-default {
    border-end-start-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-default {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-default {
    border-bottom-right-radius: var(--sf-radius-default);
    }
  }
  .radius-bottom-inline-end-default:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-default {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-default {
    border-bottom-left-radius: var(--sf-radius-default);
    }
  }
  .radius-bottom-inline-end-default:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  .radius-bottom-inline-end-default {
    border-end-end-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-ui {
    border-top-left-radius: var(--sf-radius--ui);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-ui {
    border-top-left-radius: var(--sf-radius--ui);
    }
  }
  .radius-top-ui:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-ui {
    border-top-right-radius: var(--sf-radius--ui);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-ui {
    border-top-right-radius: var(--sf-radius--ui);
    }
  }
  .radius-top-ui:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-ui {
    border-top-right-radius: var(--sf-radius--ui);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-ui {
    border-top-right-radius: var(--sf-radius--ui);
    }
  }
  .radius-top-ui:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-ui {
    border-top-left-radius: var(--sf-radius--ui);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-ui {
    border-top-left-radius: var(--sf-radius--ui);
    }
  }
  .radius-top-ui:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius--ui);
  }
  .radius-top-ui {
    border-start-start-radius: var(--sf-radius--ui);
    border-start-end-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-ui {
    border-bottom-left-radius: var(--sf-radius--ui);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-ui {
    border-bottom-left-radius: var(--sf-radius--ui);
    }
  }
  .radius-bottom-ui:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-ui {
    border-bottom-right-radius: var(--sf-radius--ui);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-ui {
    border-bottom-right-radius: var(--sf-radius--ui);
    }
  }
  .radius-bottom-ui:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-ui {
    border-bottom-right-radius: var(--sf-radius--ui);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-ui {
    border-bottom-right-radius: var(--sf-radius--ui);
    }
  }
  .radius-bottom-ui:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-ui {
    border-bottom-left-radius: var(--sf-radius--ui);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-ui {
    border-bottom-left-radius: var(--sf-radius--ui);
    }
  }
  .radius-bottom-ui:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius--ui);
  }
  .radius-bottom-ui {
    border-end-start-radius: var(--sf-radius--ui);
    border-end-end-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-ui {
    border-top-left-radius: var(--sf-radius--ui);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-ui {
    border-top-left-radius: var(--sf-radius--ui);
    }
  }
  .radius-inline-start-ui:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-ui {
    border-top-right-radius: var(--sf-radius--ui);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-ui {
    border-top-right-radius: var(--sf-radius--ui);
    }
  }
  .radius-inline-start-ui:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-ui {
    border-bottom-left-radius: var(--sf-radius--ui);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-ui {
    border-bottom-left-radius: var(--sf-radius--ui);
    }
  }
  .radius-inline-start-ui:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-ui {
    border-bottom-right-radius: var(--sf-radius--ui);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-ui {
    border-bottom-right-radius: var(--sf-radius--ui);
    }
  }
  .radius-inline-start-ui:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius--ui);
  }
  .radius-inline-start-ui {
    border-start-start-radius: var(--sf-radius--ui);
    border-end-start-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-ui {
    border-top-right-radius: var(--sf-radius--ui);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-ui {
    border-top-right-radius: var(--sf-radius--ui);
    }
  }
  .radius-inline-end-ui:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-ui {
    border-top-left-radius: var(--sf-radius--ui);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-ui {
    border-top-left-radius: var(--sf-radius--ui);
    }
  }
  .radius-inline-end-ui:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-ui {
    border-bottom-right-radius: var(--sf-radius--ui);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-ui {
    border-bottom-right-radius: var(--sf-radius--ui);
    }
  }
  .radius-inline-end-ui:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-ui {
    border-bottom-left-radius: var(--sf-radius--ui);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-ui {
    border-bottom-left-radius: var(--sf-radius--ui);
    }
  }
  .radius-inline-end-ui:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius--ui);
  }
  .radius-inline-end-ui {
    border-start-end-radius: var(--sf-radius--ui);
    border-end-end-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-ui {
    border-top-left-radius: var(--sf-radius--ui);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-ui {
    border-top-left-radius: var(--sf-radius--ui);
    }
  }
  .radius-top-inline-start-ui:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-ui {
    border-top-right-radius: var(--sf-radius--ui);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-ui {
    border-top-right-radius: var(--sf-radius--ui);
    }
  }
  .radius-top-inline-start-ui:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius--ui);
  }
  .radius-top-inline-start-ui {
    border-start-start-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-ui {
    border-top-right-radius: var(--sf-radius--ui);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-ui {
    border-top-right-radius: var(--sf-radius--ui);
    }
  }
  .radius-top-inline-end-ui:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-ui {
    border-top-left-radius: var(--sf-radius--ui);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-ui {
    border-top-left-radius: var(--sf-radius--ui);
    }
  }
  .radius-top-inline-end-ui:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius--ui);
  }
  .radius-top-inline-end-ui {
    border-start-end-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-ui {
    border-bottom-left-radius: var(--sf-radius--ui);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-ui {
    border-bottom-left-radius: var(--sf-radius--ui);
    }
  }
  .radius-bottom-inline-start-ui:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-ui {
    border-bottom-right-radius: var(--sf-radius--ui);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-ui {
    border-bottom-right-radius: var(--sf-radius--ui);
    }
  }
  .radius-bottom-inline-start-ui:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius--ui);
  }
  .radius-bottom-inline-start-ui {
    border-end-start-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-ui {
    border-bottom-right-radius: var(--sf-radius--ui);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-ui {
    border-bottom-right-radius: var(--sf-radius--ui);
    }
  }
  .radius-bottom-inline-end-ui:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-ui {
    border-bottom-left-radius: var(--sf-radius--ui);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-ui {
    border-bottom-left-radius: var(--sf-radius--ui);
    }
  }
  .radius-bottom-inline-end-ui:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius--ui);
  }
  .radius-bottom-inline-end-ui {
    border-end-end-radius: var(--sf-radius--ui);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-surface {
    border-top-left-radius: var(--sf-radius--surface);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-surface {
    border-top-left-radius: var(--sf-radius--surface);
    }
  }
  .radius-top-surface:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-surface {
    border-top-right-radius: var(--sf-radius--surface);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-surface {
    border-top-right-radius: var(--sf-radius--surface);
    }
  }
  .radius-top-surface:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-surface {
    border-top-right-radius: var(--sf-radius--surface);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-surface {
    border-top-right-radius: var(--sf-radius--surface);
    }
  }
  .radius-top-surface:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-surface {
    border-top-left-radius: var(--sf-radius--surface);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-surface {
    border-top-left-radius: var(--sf-radius--surface);
    }
  }
  .radius-top-surface:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius--surface);
  }
  .radius-top-surface {
    border-start-start-radius: var(--sf-radius--surface);
    border-start-end-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-surface {
    border-bottom-left-radius: var(--sf-radius--surface);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-surface {
    border-bottom-left-radius: var(--sf-radius--surface);
    }
  }
  .radius-bottom-surface:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-surface {
    border-bottom-right-radius: var(--sf-radius--surface);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-surface {
    border-bottom-right-radius: var(--sf-radius--surface);
    }
  }
  .radius-bottom-surface:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-surface {
    border-bottom-right-radius: var(--sf-radius--surface);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-surface {
    border-bottom-right-radius: var(--sf-radius--surface);
    }
  }
  .radius-bottom-surface:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-surface {
    border-bottom-left-radius: var(--sf-radius--surface);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-surface {
    border-bottom-left-radius: var(--sf-radius--surface);
    }
  }
  .radius-bottom-surface:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius--surface);
  }
  .radius-bottom-surface {
    border-end-start-radius: var(--sf-radius--surface);
    border-end-end-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-surface {
    border-top-left-radius: var(--sf-radius--surface);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-surface {
    border-top-left-radius: var(--sf-radius--surface);
    }
  }
  .radius-inline-start-surface:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-surface {
    border-top-right-radius: var(--sf-radius--surface);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-surface {
    border-top-right-radius: var(--sf-radius--surface);
    }
  }
  .radius-inline-start-surface:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-surface {
    border-bottom-left-radius: var(--sf-radius--surface);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-surface {
    border-bottom-left-radius: var(--sf-radius--surface);
    }
  }
  .radius-inline-start-surface:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-surface {
    border-bottom-right-radius: var(--sf-radius--surface);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-surface {
    border-bottom-right-radius: var(--sf-radius--surface);
    }
  }
  .radius-inline-start-surface:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius--surface);
  }
  .radius-inline-start-surface {
    border-start-start-radius: var(--sf-radius--surface);
    border-end-start-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-surface {
    border-top-right-radius: var(--sf-radius--surface);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-surface {
    border-top-right-radius: var(--sf-radius--surface);
    }
  }
  .radius-inline-end-surface:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-surface {
    border-top-left-radius: var(--sf-radius--surface);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-surface {
    border-top-left-radius: var(--sf-radius--surface);
    }
  }
  .radius-inline-end-surface:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-surface {
    border-bottom-right-radius: var(--sf-radius--surface);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-surface {
    border-bottom-right-radius: var(--sf-radius--surface);
    }
  }
  .radius-inline-end-surface:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-surface {
    border-bottom-left-radius: var(--sf-radius--surface);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-surface {
    border-bottom-left-radius: var(--sf-radius--surface);
    }
  }
  .radius-inline-end-surface:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius--surface);
  }
  .radius-inline-end-surface {
    border-start-end-radius: var(--sf-radius--surface);
    border-end-end-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-surface {
    border-top-left-radius: var(--sf-radius--surface);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-surface {
    border-top-left-radius: var(--sf-radius--surface);
    }
  }
  .radius-top-inline-start-surface:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-surface {
    border-top-right-radius: var(--sf-radius--surface);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-surface {
    border-top-right-radius: var(--sf-radius--surface);
    }
  }
  .radius-top-inline-start-surface:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius--surface);
  }
  .radius-top-inline-start-surface {
    border-start-start-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-surface {
    border-top-right-radius: var(--sf-radius--surface);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-surface {
    border-top-right-radius: var(--sf-radius--surface);
    }
  }
  .radius-top-inline-end-surface:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-surface {
    border-top-left-radius: var(--sf-radius--surface);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-surface {
    border-top-left-radius: var(--sf-radius--surface);
    }
  }
  .radius-top-inline-end-surface:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius--surface);
  }
  .radius-top-inline-end-surface {
    border-start-end-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-surface {
    border-bottom-left-radius: var(--sf-radius--surface);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-surface {
    border-bottom-left-radius: var(--sf-radius--surface);
    }
  }
  .radius-bottom-inline-start-surface:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-surface {
    border-bottom-right-radius: var(--sf-radius--surface);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-surface {
    border-bottom-right-radius: var(--sf-radius--surface);
    }
  }
  .radius-bottom-inline-start-surface:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius--surface);
  }
  .radius-bottom-inline-start-surface {
    border-end-start-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-surface {
    border-bottom-right-radius: var(--sf-radius--surface);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-surface {
    border-bottom-right-radius: var(--sf-radius--surface);
    }
  }
  .radius-bottom-inline-end-surface:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-surface {
    border-bottom-left-radius: var(--sf-radius--surface);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-surface {
    border-bottom-left-radius: var(--sf-radius--surface);
    }
  }
  .radius-bottom-inline-end-surface:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius--surface);
  }
  .radius-bottom-inline-end-surface {
    border-end-end-radius: var(--sf-radius--surface);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-square {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-square {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .radius-top-square:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-square {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-square {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .radius-top-square:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-square {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-square {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .radius-top-square:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-square {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-square {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .radius-top-square:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  .radius-top-square {
    border-start-start-radius: var(--sf-radius-square);
    border-start-end-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-square {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-square {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .radius-bottom-square:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-square {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-square {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .radius-bottom-square:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-square {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-square {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .radius-bottom-square:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-square {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-square {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .radius-bottom-square:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  .radius-bottom-square {
    border-end-start-radius: var(--sf-radius-square);
    border-end-end-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-square {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-square {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .radius-inline-start-square:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-square {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-square {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .radius-inline-start-square:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-square {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-square {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .radius-inline-start-square:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-square {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-square {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .radius-inline-start-square:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .radius-inline-start-square {
    border-start-start-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-square {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-square {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .radius-inline-end-square:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-square {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-square {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .radius-inline-end-square:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-square {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-square {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .radius-inline-end-square:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-square {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-square {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .radius-inline-end-square:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  .radius-inline-end-square {
    border-start-end-radius: var(--sf-radius-square);
    border-end-end-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-square {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-square {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .radius-top-inline-start-square:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-square {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-square {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .radius-top-inline-start-square:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  .radius-top-inline-start-square {
    border-start-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-square {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-square {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .radius-top-inline-end-square:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-square {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-square {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .radius-top-inline-end-square:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  .radius-top-inline-end-square {
    border-start-end-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-square {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-square {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .radius-bottom-inline-start-square:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-square {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-square {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .radius-bottom-inline-start-square:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .radius-bottom-inline-start-square {
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-square {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-square {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .radius-bottom-inline-end-square:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-square {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-square {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .radius-bottom-inline-end-square:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  .radius-bottom-inline-end-square {
    border-end-end-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-top-rounded:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-top-rounded:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-top-rounded:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-top-rounded:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  .radius-top-rounded {
    border-start-start-radius: var(--sf-radius-rounded);
    border-start-end-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-bottom-rounded:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-bottom-rounded:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-bottom-rounded:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-bottom-rounded:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  .radius-bottom-rounded {
    border-end-start-radius: var(--sf-radius-rounded);
    border-end-end-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-inline-start-rounded:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-inline-start-rounded:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-inline-start-rounded:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-inline-start-rounded:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  .radius-inline-start-rounded {
    border-start-start-radius: var(--sf-radius-rounded);
    border-end-start-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-inline-end-rounded:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-inline-end-rounded:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-inline-end-rounded:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-inline-end-rounded:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  .radius-inline-end-rounded {
    border-start-end-radius: var(--sf-radius-rounded);
    border-end-end-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-top-inline-start-rounded:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-top-inline-start-rounded:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  .radius-top-inline-start-rounded {
    border-start-start-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-top-inline-end-rounded:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-top-inline-end-rounded:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  .radius-top-inline-end-rounded {
    border-start-end-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-bottom-inline-start-rounded:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-bottom-inline-start-rounded:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  .radius-bottom-inline-start-rounded {
    border-end-start-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-bottom-inline-end-rounded:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-bottom-inline-end-rounded:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  .radius-bottom-inline-end-rounded {
    border-end-end-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-round {
    border-top-left-radius: var(--sf-radius-round);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-round {
    border-top-left-radius: var(--sf-radius-round);
    }
  }
  .radius-top-round:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-round {
    border-top-right-radius: var(--sf-radius-round);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-round {
    border-top-right-radius: var(--sf-radius-round);
    }
  }
  .radius-top-round:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-round {
    border-top-right-radius: var(--sf-radius-round);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-round {
    border-top-right-radius: var(--sf-radius-round);
    }
  }
  .radius-top-round:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-round {
    border-top-left-radius: var(--sf-radius-round);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-round {
    border-top-left-radius: var(--sf-radius-round);
    }
  }
  .radius-top-round:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-round);
  }
  .radius-top-round {
    border-start-start-radius: var(--sf-radius-round);
    border-start-end-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-round {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-round {
    border-bottom-left-radius: var(--sf-radius-round);
    }
  }
  .radius-bottom-round:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-round {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-round {
    border-bottom-right-radius: var(--sf-radius-round);
    }
  }
  .radius-bottom-round:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-round {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-round {
    border-bottom-right-radius: var(--sf-radius-round);
    }
  }
  .radius-bottom-round:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-round {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-round {
    border-bottom-left-radius: var(--sf-radius-round);
    }
  }
  .radius-bottom-round:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  .radius-bottom-round {
    border-end-start-radius: var(--sf-radius-round);
    border-end-end-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-round {
    border-top-left-radius: var(--sf-radius-round);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-round {
    border-top-left-radius: var(--sf-radius-round);
    }
  }
  .radius-inline-start-round:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-round {
    border-top-right-radius: var(--sf-radius-round);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-round {
    border-top-right-radius: var(--sf-radius-round);
    }
  }
  .radius-inline-start-round:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-round {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-round {
    border-bottom-left-radius: var(--sf-radius-round);
    }
  }
  .radius-inline-start-round:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-round {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-round {
    border-bottom-right-radius: var(--sf-radius-round);
    }
  }
  .radius-inline-start-round:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  .radius-inline-start-round {
    border-start-start-radius: var(--sf-radius-round);
    border-end-start-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-round {
    border-top-right-radius: var(--sf-radius-round);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-round {
    border-top-right-radius: var(--sf-radius-round);
    }
  }
  .radius-inline-end-round:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-round {
    border-top-left-radius: var(--sf-radius-round);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-round {
    border-top-left-radius: var(--sf-radius-round);
    }
  }
  .radius-inline-end-round:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-round {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-round {
    border-bottom-right-radius: var(--sf-radius-round);
    }
  }
  .radius-inline-end-round:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-round {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-round {
    border-bottom-left-radius: var(--sf-radius-round);
    }
  }
  .radius-inline-end-round:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  .radius-inline-end-round {
    border-start-end-radius: var(--sf-radius-round);
    border-end-end-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-round {
    border-top-left-radius: var(--sf-radius-round);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-round {
    border-top-left-radius: var(--sf-radius-round);
    }
  }
  .radius-top-inline-start-round:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-round {
    border-top-right-radius: var(--sf-radius-round);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-round {
    border-top-right-radius: var(--sf-radius-round);
    }
  }
  .radius-top-inline-start-round:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-round);
  }
  .radius-top-inline-start-round {
    border-start-start-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-round {
    border-top-right-radius: var(--sf-radius-round);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-round {
    border-top-right-radius: var(--sf-radius-round);
    }
  }
  .radius-top-inline-end-round:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-round {
    border-top-left-radius: var(--sf-radius-round);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-round {
    border-top-left-radius: var(--sf-radius-round);
    }
  }
  .radius-top-inline-end-round:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-round);
  }
  .radius-top-inline-end-round {
    border-start-end-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-round {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-round {
    border-bottom-left-radius: var(--sf-radius-round);
    }
  }
  .radius-bottom-inline-start-round:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-round {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-round {
    border-bottom-right-radius: var(--sf-radius-round);
    }
  }
  .radius-bottom-inline-start-round:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  .radius-bottom-inline-start-round {
    border-end-start-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-round {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-round {
    border-bottom-right-radius: var(--sf-radius-round);
    }
  }
  .radius-bottom-inline-end-round:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-round {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-round {
    border-bottom-left-radius: var(--sf-radius-round);
    }
  }
  .radius-bottom-inline-end-round:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  .radius-bottom-inline-end-round {
    border-end-end-radius: var(--sf-radius-round);
  }
}

/* docara-shell-source: runtime/utility/border-width/default/css/default.css */
@layer sf.utilities {
  .border-1 {
    border-width: var(--sf-a1);
  }
  .border-2 {
    border-width: var(--sf-a2);
  }
  .border-3 {
    border-width: var(--sf-a3);
  }
  .border-4 {
    border-width: var(--sf-a4);
  }
  .border-5 {
    border-width: var(--sf-a5);
  }
  .border-6 {
    border-width: var(--sf-a6);
  }
  .border-7 {
    border-width: var(--sf-a7);
  }
  .border-8 {
    border-width: var(--sf-a8);
  }
  .border-9 {
    border-width: var(--sf-a9);
  }
  .border-10 {
    border-width: var(--sf-b0);
  }
  .border-0 {
    border-width: var(--sf-0);
  }
  .border-top-1 {
    border-top-width: var(--sf-a1);
  }
  .border-top-2 {
    border-top-width: var(--sf-a2);
  }
  .border-top-3 {
    border-top-width: var(--sf-a3);
  }
  .border-top-4 {
    border-top-width: var(--sf-a4);
  }
  .border-top-5 {
    border-top-width: var(--sf-a5);
  }
  .border-top-6 {
    border-top-width: var(--sf-a6);
  }
  .border-top-7 {
    border-top-width: var(--sf-a7);
  }
  .border-top-8 {
    border-top-width: var(--sf-a8);
  }
  .border-top-9 {
    border-top-width: var(--sf-a9);
  }
  .border-top-10 {
    border-top-width: var(--sf-b0);
  }
  .border-top-0 {
    border-top-width: var(--sf-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-1 {
    border-right-width: var(--sf-a1);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-1 {
    border-right-width: var(--sf-a1);
    }
  }
  .border-inline-end-1:where(:dir(ltr)) {
    border-right-width: var(--sf-a1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-1 {
    border-left-width: var(--sf-a1);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-1 {
    border-left-width: var(--sf-a1);
    }
  }
  .border-inline-end-1:where(:dir(rtl)) {
    border-left-width: var(--sf-a1);
  }
  .border-inline-end-1 {
    border-inline-end-width: var(--sf-a1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-2 {
    border-right-width: var(--sf-a2);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-2 {
    border-right-width: var(--sf-a2);
    }
  }
  .border-inline-end-2:where(:dir(ltr)) {
    border-right-width: var(--sf-a2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-2 {
    border-left-width: var(--sf-a2);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-2 {
    border-left-width: var(--sf-a2);
    }
  }
  .border-inline-end-2:where(:dir(rtl)) {
    border-left-width: var(--sf-a2);
  }
  .border-inline-end-2 {
    border-inline-end-width: var(--sf-a2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-3 {
    border-right-width: var(--sf-a3);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-3 {
    border-right-width: var(--sf-a3);
    }
  }
  .border-inline-end-3:where(:dir(ltr)) {
    border-right-width: var(--sf-a3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-3 {
    border-left-width: var(--sf-a3);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-3 {
    border-left-width: var(--sf-a3);
    }
  }
  .border-inline-end-3:where(:dir(rtl)) {
    border-left-width: var(--sf-a3);
  }
  .border-inline-end-3 {
    border-inline-end-width: var(--sf-a3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-4 {
    border-right-width: var(--sf-a4);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-4 {
    border-right-width: var(--sf-a4);
    }
  }
  .border-inline-end-4:where(:dir(ltr)) {
    border-right-width: var(--sf-a4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-4 {
    border-left-width: var(--sf-a4);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-4 {
    border-left-width: var(--sf-a4);
    }
  }
  .border-inline-end-4:where(:dir(rtl)) {
    border-left-width: var(--sf-a4);
  }
  .border-inline-end-4 {
    border-inline-end-width: var(--sf-a4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-5 {
    border-right-width: var(--sf-a5);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-5 {
    border-right-width: var(--sf-a5);
    }
  }
  .border-inline-end-5:where(:dir(ltr)) {
    border-right-width: var(--sf-a5);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-5 {
    border-left-width: var(--sf-a5);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-5 {
    border-left-width: var(--sf-a5);
    }
  }
  .border-inline-end-5:where(:dir(rtl)) {
    border-left-width: var(--sf-a5);
  }
  .border-inline-end-5 {
    border-inline-end-width: var(--sf-a5);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-6 {
    border-right-width: var(--sf-a6);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-6 {
    border-right-width: var(--sf-a6);
    }
  }
  .border-inline-end-6:where(:dir(ltr)) {
    border-right-width: var(--sf-a6);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-6 {
    border-left-width: var(--sf-a6);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-6 {
    border-left-width: var(--sf-a6);
    }
  }
  .border-inline-end-6:where(:dir(rtl)) {
    border-left-width: var(--sf-a6);
  }
  .border-inline-end-6 {
    border-inline-end-width: var(--sf-a6);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-7 {
    border-right-width: var(--sf-a7);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-7 {
    border-right-width: var(--sf-a7);
    }
  }
  .border-inline-end-7:where(:dir(ltr)) {
    border-right-width: var(--sf-a7);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-7 {
    border-left-width: var(--sf-a7);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-7 {
    border-left-width: var(--sf-a7);
    }
  }
  .border-inline-end-7:where(:dir(rtl)) {
    border-left-width: var(--sf-a7);
  }
  .border-inline-end-7 {
    border-inline-end-width: var(--sf-a7);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-8 {
    border-right-width: var(--sf-a8);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-8 {
    border-right-width: var(--sf-a8);
    }
  }
  .border-inline-end-8:where(:dir(ltr)) {
    border-right-width: var(--sf-a8);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-8 {
    border-left-width: var(--sf-a8);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-8 {
    border-left-width: var(--sf-a8);
    }
  }
  .border-inline-end-8:where(:dir(rtl)) {
    border-left-width: var(--sf-a8);
  }
  .border-inline-end-8 {
    border-inline-end-width: var(--sf-a8);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-9 {
    border-right-width: var(--sf-a9);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-9 {
    border-right-width: var(--sf-a9);
    }
  }
  .border-inline-end-9:where(:dir(ltr)) {
    border-right-width: var(--sf-a9);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-9 {
    border-left-width: var(--sf-a9);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-9 {
    border-left-width: var(--sf-a9);
    }
  }
  .border-inline-end-9:where(:dir(rtl)) {
    border-left-width: var(--sf-a9);
  }
  .border-inline-end-9 {
    border-inline-end-width: var(--sf-a9);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-10 {
    border-right-width: var(--sf-b0);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-10 {
    border-right-width: var(--sf-b0);
    }
  }
  .border-inline-end-10:where(:dir(ltr)) {
    border-right-width: var(--sf-b0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-10 {
    border-left-width: var(--sf-b0);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-10 {
    border-left-width: var(--sf-b0);
    }
  }
  .border-inline-end-10:where(:dir(rtl)) {
    border-left-width: var(--sf-b0);
  }
  .border-inline-end-10 {
    border-inline-end-width: var(--sf-b0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-0 {
    border-right-width: var(--sf-0);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-0 {
    border-right-width: var(--sf-0);
    }
  }
  .border-inline-end-0:where(:dir(ltr)) {
    border-right-width: var(--sf-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-0 {
    border-left-width: var(--sf-0);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-0 {
    border-left-width: var(--sf-0);
    }
  }
  .border-inline-end-0:where(:dir(rtl)) {
    border-left-width: var(--sf-0);
  }
  .border-inline-end-0 {
    border-inline-end-width: var(--sf-0);
  }
  .border-bottom-1 {
    border-bottom-width: var(--sf-a1);
  }
  .border-bottom-2 {
    border-bottom-width: var(--sf-a2);
  }
  .border-bottom-3 {
    border-bottom-width: var(--sf-a3);
  }
  .border-bottom-4 {
    border-bottom-width: var(--sf-a4);
  }
  .border-bottom-5 {
    border-bottom-width: var(--sf-a5);
  }
  .border-bottom-6 {
    border-bottom-width: var(--sf-a6);
  }
  .border-bottom-7 {
    border-bottom-width: var(--sf-a7);
  }
  .border-bottom-8 {
    border-bottom-width: var(--sf-a8);
  }
  .border-bottom-9 {
    border-bottom-width: var(--sf-a9);
  }
  .border-bottom-10 {
    border-bottom-width: var(--sf-b0);
  }
  .border-bottom-0 {
    border-bottom-width: var(--sf-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-1 {
    border-left-width: var(--sf-a1);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-1 {
    border-left-width: var(--sf-a1);
    }
  }
  .border-inline-start-1:where(:dir(ltr)) {
    border-left-width: var(--sf-a1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-1 {
    border-right-width: var(--sf-a1);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-1 {
    border-right-width: var(--sf-a1);
    }
  }
  .border-inline-start-1:where(:dir(rtl)) {
    border-right-width: var(--sf-a1);
  }
  .border-inline-start-1 {
    border-inline-start-width: var(--sf-a1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-2 {
    border-left-width: var(--sf-a2);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-2 {
    border-left-width: var(--sf-a2);
    }
  }
  .border-inline-start-2:where(:dir(ltr)) {
    border-left-width: var(--sf-a2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-2 {
    border-right-width: var(--sf-a2);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-2 {
    border-right-width: var(--sf-a2);
    }
  }
  .border-inline-start-2:where(:dir(rtl)) {
    border-right-width: var(--sf-a2);
  }
  .border-inline-start-2 {
    border-inline-start-width: var(--sf-a2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-3 {
    border-left-width: var(--sf-a3);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-3 {
    border-left-width: var(--sf-a3);
    }
  }
  .border-inline-start-3:where(:dir(ltr)) {
    border-left-width: var(--sf-a3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-3 {
    border-right-width: var(--sf-a3);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-3 {
    border-right-width: var(--sf-a3);
    }
  }
  .border-inline-start-3:where(:dir(rtl)) {
    border-right-width: var(--sf-a3);
  }
  .border-inline-start-3 {
    border-inline-start-width: var(--sf-a3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-4 {
    border-left-width: var(--sf-a4);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-4 {
    border-left-width: var(--sf-a4);
    }
  }
  .border-inline-start-4:where(:dir(ltr)) {
    border-left-width: var(--sf-a4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-4 {
    border-right-width: var(--sf-a4);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-4 {
    border-right-width: var(--sf-a4);
    }
  }
  .border-inline-start-4:where(:dir(rtl)) {
    border-right-width: var(--sf-a4);
  }
  .border-inline-start-4 {
    border-inline-start-width: var(--sf-a4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-5 {
    border-left-width: var(--sf-a5);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-5 {
    border-left-width: var(--sf-a5);
    }
  }
  .border-inline-start-5:where(:dir(ltr)) {
    border-left-width: var(--sf-a5);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-5 {
    border-right-width: var(--sf-a5);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-5 {
    border-right-width: var(--sf-a5);
    }
  }
  .border-inline-start-5:where(:dir(rtl)) {
    border-right-width: var(--sf-a5);
  }
  .border-inline-start-5 {
    border-inline-start-width: var(--sf-a5);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-6 {
    border-left-width: var(--sf-a6);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-6 {
    border-left-width: var(--sf-a6);
    }
  }
  .border-inline-start-6:where(:dir(ltr)) {
    border-left-width: var(--sf-a6);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-6 {
    border-right-width: var(--sf-a6);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-6 {
    border-right-width: var(--sf-a6);
    }
  }
  .border-inline-start-6:where(:dir(rtl)) {
    border-right-width: var(--sf-a6);
  }
  .border-inline-start-6 {
    border-inline-start-width: var(--sf-a6);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-7 {
    border-left-width: var(--sf-a7);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-7 {
    border-left-width: var(--sf-a7);
    }
  }
  .border-inline-start-7:where(:dir(ltr)) {
    border-left-width: var(--sf-a7);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-7 {
    border-right-width: var(--sf-a7);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-7 {
    border-right-width: var(--sf-a7);
    }
  }
  .border-inline-start-7:where(:dir(rtl)) {
    border-right-width: var(--sf-a7);
  }
  .border-inline-start-7 {
    border-inline-start-width: var(--sf-a7);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-8 {
    border-left-width: var(--sf-a8);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-8 {
    border-left-width: var(--sf-a8);
    }
  }
  .border-inline-start-8:where(:dir(ltr)) {
    border-left-width: var(--sf-a8);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-8 {
    border-right-width: var(--sf-a8);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-8 {
    border-right-width: var(--sf-a8);
    }
  }
  .border-inline-start-8:where(:dir(rtl)) {
    border-right-width: var(--sf-a8);
  }
  .border-inline-start-8 {
    border-inline-start-width: var(--sf-a8);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-9 {
    border-left-width: var(--sf-a9);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-9 {
    border-left-width: var(--sf-a9);
    }
  }
  .border-inline-start-9:where(:dir(ltr)) {
    border-left-width: var(--sf-a9);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-9 {
    border-right-width: var(--sf-a9);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-9 {
    border-right-width: var(--sf-a9);
    }
  }
  .border-inline-start-9:where(:dir(rtl)) {
    border-right-width: var(--sf-a9);
  }
  .border-inline-start-9 {
    border-inline-start-width: var(--sf-a9);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-10 {
    border-left-width: var(--sf-b0);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-10 {
    border-left-width: var(--sf-b0);
    }
  }
  .border-inline-start-10:where(:dir(ltr)) {
    border-left-width: var(--sf-b0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-10 {
    border-right-width: var(--sf-b0);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-10 {
    border-right-width: var(--sf-b0);
    }
  }
  .border-inline-start-10:where(:dir(rtl)) {
    border-right-width: var(--sf-b0);
  }
  .border-inline-start-10 {
    border-inline-start-width: var(--sf-b0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-0 {
    border-left-width: var(--sf-0);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-0 {
    border-left-width: var(--sf-0);
    }
  }
  .border-inline-start-0:where(:dir(ltr)) {
    border-left-width: var(--sf-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-0 {
    border-right-width: var(--sf-0);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-0 {
    border-right-width: var(--sf-0);
    }
  }
  .border-inline-start-0:where(:dir(rtl)) {
    border-right-width: var(--sf-0);
  }
  .border-inline-start-0 {
    border-inline-start-width: var(--sf-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-1 {
    border-right-width: var(--sf-a1);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-1 {
    border-right-width: var(--sf-a1);
    }
  }
  .border-x-1:where(:dir(ltr)) {
    border-right-width: var(--sf-a1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-1 {
    border-left-width: var(--sf-a1);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-1 {
    border-left-width: var(--sf-a1);
    }
  }
  .border-x-1:where(:dir(rtl)) {
    border-left-width: var(--sf-a1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-1 {
    border-left-width: var(--sf-a1);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-1 {
    border-left-width: var(--sf-a1);
    }
  }
  .border-x-1:where(:dir(ltr)) {
    border-left-width: var(--sf-a1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-1 {
    border-right-width: var(--sf-a1);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-1 {
    border-right-width: var(--sf-a1);
    }
  }
  .border-x-1:where(:dir(rtl)) {
    border-right-width: var(--sf-a1);
  }
  .border-x-1 {
    border-inline-end-width: var(--sf-a1);
    border-inline-start-width: var(--sf-a1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-2 {
    border-right-width: var(--sf-a2);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-2 {
    border-right-width: var(--sf-a2);
    }
  }
  .border-x-2:where(:dir(ltr)) {
    border-right-width: var(--sf-a2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-2 {
    border-left-width: var(--sf-a2);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-2 {
    border-left-width: var(--sf-a2);
    }
  }
  .border-x-2:where(:dir(rtl)) {
    border-left-width: var(--sf-a2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-2 {
    border-left-width: var(--sf-a2);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-2 {
    border-left-width: var(--sf-a2);
    }
  }
  .border-x-2:where(:dir(ltr)) {
    border-left-width: var(--sf-a2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-2 {
    border-right-width: var(--sf-a2);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-2 {
    border-right-width: var(--sf-a2);
    }
  }
  .border-x-2:where(:dir(rtl)) {
    border-right-width: var(--sf-a2);
  }
  .border-x-2 {
    border-inline-end-width: var(--sf-a2);
    border-inline-start-width: var(--sf-a2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-3 {
    border-right-width: var(--sf-a3);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-3 {
    border-right-width: var(--sf-a3);
    }
  }
  .border-x-3:where(:dir(ltr)) {
    border-right-width: var(--sf-a3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-3 {
    border-left-width: var(--sf-a3);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-3 {
    border-left-width: var(--sf-a3);
    }
  }
  .border-x-3:where(:dir(rtl)) {
    border-left-width: var(--sf-a3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-3 {
    border-left-width: var(--sf-a3);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-3 {
    border-left-width: var(--sf-a3);
    }
  }
  .border-x-3:where(:dir(ltr)) {
    border-left-width: var(--sf-a3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-3 {
    border-right-width: var(--sf-a3);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-3 {
    border-right-width: var(--sf-a3);
    }
  }
  .border-x-3:where(:dir(rtl)) {
    border-right-width: var(--sf-a3);
  }
  .border-x-3 {
    border-inline-end-width: var(--sf-a3);
    border-inline-start-width: var(--sf-a3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-4 {
    border-right-width: var(--sf-a4);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-4 {
    border-right-width: var(--sf-a4);
    }
  }
  .border-x-4:where(:dir(ltr)) {
    border-right-width: var(--sf-a4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-4 {
    border-left-width: var(--sf-a4);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-4 {
    border-left-width: var(--sf-a4);
    }
  }
  .border-x-4:where(:dir(rtl)) {
    border-left-width: var(--sf-a4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-4 {
    border-left-width: var(--sf-a4);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-4 {
    border-left-width: var(--sf-a4);
    }
  }
  .border-x-4:where(:dir(ltr)) {
    border-left-width: var(--sf-a4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-4 {
    border-right-width: var(--sf-a4);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-4 {
    border-right-width: var(--sf-a4);
    }
  }
  .border-x-4:where(:dir(rtl)) {
    border-right-width: var(--sf-a4);
  }
  .border-x-4 {
    border-inline-end-width: var(--sf-a4);
    border-inline-start-width: var(--sf-a4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-5 {
    border-right-width: var(--sf-a5);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-5 {
    border-right-width: var(--sf-a5);
    }
  }
  .border-x-5:where(:dir(ltr)) {
    border-right-width: var(--sf-a5);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-5 {
    border-left-width: var(--sf-a5);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-5 {
    border-left-width: var(--sf-a5);
    }
  }
  .border-x-5:where(:dir(rtl)) {
    border-left-width: var(--sf-a5);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-5 {
    border-left-width: var(--sf-a5);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-5 {
    border-left-width: var(--sf-a5);
    }
  }
  .border-x-5:where(:dir(ltr)) {
    border-left-width: var(--sf-a5);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-5 {
    border-right-width: var(--sf-a5);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-5 {
    border-right-width: var(--sf-a5);
    }
  }
  .border-x-5:where(:dir(rtl)) {
    border-right-width: var(--sf-a5);
  }
  .border-x-5 {
    border-inline-end-width: var(--sf-a5);
    border-inline-start-width: var(--sf-a5);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-6 {
    border-right-width: var(--sf-a6);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-6 {
    border-right-width: var(--sf-a6);
    }
  }
  .border-x-6:where(:dir(ltr)) {
    border-right-width: var(--sf-a6);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-6 {
    border-left-width: var(--sf-a6);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-6 {
    border-left-width: var(--sf-a6);
    }
  }
  .border-x-6:where(:dir(rtl)) {
    border-left-width: var(--sf-a6);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-6 {
    border-left-width: var(--sf-a6);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-6 {
    border-left-width: var(--sf-a6);
    }
  }
  .border-x-6:where(:dir(ltr)) {
    border-left-width: var(--sf-a6);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-6 {
    border-right-width: var(--sf-a6);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-6 {
    border-right-width: var(--sf-a6);
    }
  }
  .border-x-6:where(:dir(rtl)) {
    border-right-width: var(--sf-a6);
  }
  .border-x-6 {
    border-inline-end-width: var(--sf-a6);
    border-inline-start-width: var(--sf-a6);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-7 {
    border-right-width: var(--sf-a7);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-7 {
    border-right-width: var(--sf-a7);
    }
  }
  .border-x-7:where(:dir(ltr)) {
    border-right-width: var(--sf-a7);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-7 {
    border-left-width: var(--sf-a7);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-7 {
    border-left-width: var(--sf-a7);
    }
  }
  .border-x-7:where(:dir(rtl)) {
    border-left-width: var(--sf-a7);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-7 {
    border-left-width: var(--sf-a7);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-7 {
    border-left-width: var(--sf-a7);
    }
  }
  .border-x-7:where(:dir(ltr)) {
    border-left-width: var(--sf-a7);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-7 {
    border-right-width: var(--sf-a7);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-7 {
    border-right-width: var(--sf-a7);
    }
  }
  .border-x-7:where(:dir(rtl)) {
    border-right-width: var(--sf-a7);
  }
  .border-x-7 {
    border-inline-end-width: var(--sf-a7);
    border-inline-start-width: var(--sf-a7);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-8 {
    border-right-width: var(--sf-a8);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-8 {
    border-right-width: var(--sf-a8);
    }
  }
  .border-x-8:where(:dir(ltr)) {
    border-right-width: var(--sf-a8);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-8 {
    border-left-width: var(--sf-a8);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-8 {
    border-left-width: var(--sf-a8);
    }
  }
  .border-x-8:where(:dir(rtl)) {
    border-left-width: var(--sf-a8);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-8 {
    border-left-width: var(--sf-a8);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-8 {
    border-left-width: var(--sf-a8);
    }
  }
  .border-x-8:where(:dir(ltr)) {
    border-left-width: var(--sf-a8);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-8 {
    border-right-width: var(--sf-a8);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-8 {
    border-right-width: var(--sf-a8);
    }
  }
  .border-x-8:where(:dir(rtl)) {
    border-right-width: var(--sf-a8);
  }
  .border-x-8 {
    border-inline-end-width: var(--sf-a8);
    border-inline-start-width: var(--sf-a8);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-9 {
    border-right-width: var(--sf-a9);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-9 {
    border-right-width: var(--sf-a9);
    }
  }
  .border-x-9:where(:dir(ltr)) {
    border-right-width: var(--sf-a9);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-9 {
    border-left-width: var(--sf-a9);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-9 {
    border-left-width: var(--sf-a9);
    }
  }
  .border-x-9:where(:dir(rtl)) {
    border-left-width: var(--sf-a9);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-9 {
    border-left-width: var(--sf-a9);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-9 {
    border-left-width: var(--sf-a9);
    }
  }
  .border-x-9:where(:dir(ltr)) {
    border-left-width: var(--sf-a9);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-9 {
    border-right-width: var(--sf-a9);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-9 {
    border-right-width: var(--sf-a9);
    }
  }
  .border-x-9:where(:dir(rtl)) {
    border-right-width: var(--sf-a9);
  }
  .border-x-9 {
    border-inline-end-width: var(--sf-a9);
    border-inline-start-width: var(--sf-a9);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-10 {
    border-right-width: var(--sf-b0);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-10 {
    border-right-width: var(--sf-b0);
    }
  }
  .border-x-10:where(:dir(ltr)) {
    border-right-width: var(--sf-b0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-10 {
    border-left-width: var(--sf-b0);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-10 {
    border-left-width: var(--sf-b0);
    }
  }
  .border-x-10:where(:dir(rtl)) {
    border-left-width: var(--sf-b0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-10 {
    border-left-width: var(--sf-b0);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-10 {
    border-left-width: var(--sf-b0);
    }
  }
  .border-x-10:where(:dir(ltr)) {
    border-left-width: var(--sf-b0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-10 {
    border-right-width: var(--sf-b0);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-10 {
    border-right-width: var(--sf-b0);
    }
  }
  .border-x-10:where(:dir(rtl)) {
    border-right-width: var(--sf-b0);
  }
  .border-x-10 {
    border-inline-end-width: var(--sf-b0);
    border-inline-start-width: var(--sf-b0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-0 {
    border-right-width: var(--sf-0);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-0 {
    border-right-width: var(--sf-0);
    }
  }
  .border-x-0:where(:dir(ltr)) {
    border-right-width: var(--sf-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-0 {
    border-left-width: var(--sf-0);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-0 {
    border-left-width: var(--sf-0);
    }
  }
  .border-x-0:where(:dir(rtl)) {
    border-left-width: var(--sf-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-0 {
    border-left-width: var(--sf-0);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-0 {
    border-left-width: var(--sf-0);
    }
  }
  .border-x-0:where(:dir(ltr)) {
    border-left-width: var(--sf-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-0 {
    border-right-width: var(--sf-0);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-0 {
    border-right-width: var(--sf-0);
    }
  }
  .border-x-0:where(:dir(rtl)) {
    border-right-width: var(--sf-0);
  }
  .border-x-0 {
    border-inline-end-width: var(--sf-0);
    border-inline-start-width: var(--sf-0);
  }
  .border-y-1 {
    border-top-width: var(--sf-a1);
    border-bottom-width: var(--sf-a1);
  }
  .border-y-2 {
    border-top-width: var(--sf-a2);
    border-bottom-width: var(--sf-a2);
  }
  .border-y-3 {
    border-top-width: var(--sf-a3);
    border-bottom-width: var(--sf-a3);
  }
  .border-y-4 {
    border-top-width: var(--sf-a4);
    border-bottom-width: var(--sf-a4);
  }
  .border-y-5 {
    border-top-width: var(--sf-a5);
    border-bottom-width: var(--sf-a5);
  }
  .border-y-6 {
    border-top-width: var(--sf-a6);
    border-bottom-width: var(--sf-a6);
  }
  .border-y-7 {
    border-top-width: var(--sf-a7);
    border-bottom-width: var(--sf-a7);
  }
  .border-y-8 {
    border-top-width: var(--sf-a8);
    border-bottom-width: var(--sf-a8);
  }
  .border-y-9 {
    border-top-width: var(--sf-a9);
    border-bottom-width: var(--sf-a9);
  }
  .border-y-10 {
    border-top-width: var(--sf-b0);
    border-bottom-width: var(--sf-b0);
  }
  .border-y-0 {
    border-top-width: var(--sf-0);
    border-bottom-width: var(--sf-0);
  }
}

/* docara-shell-source: runtime/component/breadcrumbs/css/breadcrumbs.css */
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
/*
* _var__component_name.scss
* 
* SCSS file containing variables for component styling.
* 
* Used to define default parameters (color, size, etc.)
* that can be overridden in other parts of the project.
* 
* Example usage:
* --sf-icon--fill: 0; // Fill for icon
*/
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-breadcrumbs-item {
    min-width: -webkit-min-content;
    min-width: -moz-min-content;
    min-width: min-content;
    min-inline-size: -webkit-min-content;
    min-inline-size: -moz-min-content;
    min-inline-size: min-content;
    background-color: var(--sf-breadcrumbs-item--background-color);
    box-shadow: var(--sf-breadcrumbs-item--box-shadow);
    --sf-breadcrumbs-item--background-color: transparent;
    --sf-breadcrumbs-item--box-shadow: none;
  }
  .sf-breadcrumbs-item.sf-breadcrumbs-item--separator {
    flex: 0 0 auto;
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-breadcrumbs-item-container--gap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-breadcrumbs-item .sf-breadcrumbs-item-container {
    min-width: 0;
    min-inline-size: 0;
    word-wrap: anywhere;
    --sf-breadcrumbs-item-container--background-color: transparent;
    --sf-breadcrumbs-item-container--color: var(--sf-on-surface-variant);
    --sf-breadcrumbs-item-container--font-family: var(--sf-text--family);
    --sf-breadcrumbs-item-container--font-size: var(--sf-text-size-1\/2);
    --sf-breadcrumbs-item-container--font-weight: var(--sf-font-weight-regular);
    --sf-breadcrumbs-item-container--gap: var(--sf-space-1\/4);
    --sf-breadcrumbs-item-container--line-height: var(--sf-text-height-1\/2);
    background-color: var(--sf-breadcrumbs-item-container--background-color);
    color: var(--sf-breadcrumbs-item-container--color);
    font-family: var(--sf-breadcrumbs-item-container--font-family);
    font-size: var(--sf-breadcrumbs-item-container--font-size);
    font-weight: var(--sf-breadcrumbs-item-container--font-weight);
    gap: var(--sf-breadcrumbs-item-container--gap);
    line-height: var(--sf-breadcrumbs-item-container--line-height);
  }
  .sf-breadcrumbs-item .sf-breadcrumbs-item-container > .sf-icon, .sf-breadcrumbs-item .sf-breadcrumbs-item-container > sf-icon > .sf-icon {
    flex-shrink: 0;
    --sf-icon--font-size: var(--sf-text-height-1\/2);
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--color, var(--sf-on-surface-variant));
    font-size: var(--sf-icon--font-size);
    height: var(--sf-icon--height);
    width: var(--sf-icon--width);
  }
  .sf-breadcrumbs-item.sf-breadcrumbs-item--link .sf-breadcrumbs-item-container {
    --sf-breadcrumbs-item-container--color: var(--sf-primary);
  }
  .sf-breadcrumbs-item[aria-current=page] .sf-breadcrumbs-item-container,
  .sf-breadcrumbs-item .sf-breadcrumbs-item-container[aria-current=page] {
    --sf-breadcrumbs-item-container--color: var(--sf-on-surface);
    --sf-breadcrumbs-item-container--font-weight: var(--sf-font-weight-medium);
  }
}
@layer sf.states {
  .sf-breadcrumbs-item.sf-breadcrumbs-item--link:not(:disabled):not(.disabled):hover > .sf-breadcrumbs-item-container > .sf-icon, .sf-breadcrumbs-item.sf-breadcrumbs-item--link:not(:disabled):not(.disabled):hover > .sf-breadcrumbs-item-container > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-primary-hover);
  }
  .sf-breadcrumbs-item.sf-breadcrumbs-item--link:not(:disabled):not(.disabled):hover .sf-breadcrumbs-item-container {
    --sf-breadcrumbs-item-container--color: var(--sf-primary-hover);
  }
  .sf-breadcrumbs-item:not(:disabled):not(.disabled):active.sf-breadcrumbs-item--link > .sf-breadcrumbs-item-container > .sf-icon, .sf-breadcrumbs-item:not(:disabled):not(.disabled):active.sf-breadcrumbs-item--link > .sf-breadcrumbs-item-container > sf-icon > .sf-icon, .sf-breadcrumbs-item.active.sf-breadcrumbs-item--link > .sf-breadcrumbs-item-container > .sf-icon, .sf-breadcrumbs-item.active.sf-breadcrumbs-item--link > .sf-breadcrumbs-item-container > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-primary-active);
  }
  .sf-breadcrumbs-item:not(:disabled):not(.disabled):active.sf-breadcrumbs-item--link .sf-breadcrumbs-item-container, .sf-breadcrumbs-item.active.sf-breadcrumbs-item--link .sf-breadcrumbs-item-container {
    --sf-breadcrumbs-item-container--color: var(--sf-primary-active);
  }
  .sf-breadcrumbs-item.sf-breadcrumbs-item--link:not(:disabled):not(.disabled):not([aria-disabled=true]).focus-visible {
    --sf-breadcrumbs-item--background-color: var(--sf-transparent-for-focus);
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-breadcrumbs-item.sf-breadcrumbs-item--link:not(:disabled):not(.disabled):not([aria-disabled=true]):focus-visible {
    --sf-breadcrumbs-item--background-color: var(--sf-transparent-for-focus);
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  @media (forced-colors: active) {
    .sf-breadcrumbs-item.sf-breadcrumbs-item--link:not(:disabled):not(.disabled):not([aria-disabled=true]).focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-breadcrumbs-item--box-shadow: none;
    }
    .sf-breadcrumbs-item.sf-breadcrumbs-item--link:not(:disabled):not(.disabled):not([aria-disabled=true]):focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-breadcrumbs-item--box-shadow: none;
    }
  }
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/wrap (.flex-wrap) gap/var(--sf-space-1\/3) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-breadcrumbs {
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
    flex-wrap: wrap;
    background-color: transparent;
    background-color: var(--sf-breadcrumbs--background-color, transparent);
    gap: var(--sf-space-1\/3);
    gap: var(--sf-breadcrumbs--gap, var(--sf-space-1\/3));
    overscroll-behavior-inline: contain;
  }
  .sf-breadcrumbs-item[hidden] {
    display: none;
  }
  [dir=rtl] .sf-breadcrumbs .sf-breadcrumbs-item--separator .sf-icon,
  .sf-breadcrumbs[dir=rtl] .sf-breadcrumbs-item--separator .sf-icon {
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
  }
}

/* docara-shell-source: runtime/component/button-group/css/button-group.css */
@layer sf.components {
  .sf-button-group {
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    max-width: 100%;
    max-inline-size: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    isolation: isolate;
    scrollbar-width: thin;
  }
  .sf-button-group > sf-button,
  .sf-button-group > .sf-button {
    flex: 0 0 auto;
    min-width: 0;
    min-inline-size: 0;
  }
  .sf-button-group[data-orientation=vertical] {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .sf-button-group[aria-orientation=vertical] {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .sf-button-group[data-orientation=vertical] > sf-button {
    width: 100%;
    inline-size: 100%;
  }
  .sf-button-group[aria-orientation=vertical] > sf-button {
    width: 100%;
    inline-size: 100%;
  }
  .sf-button-group[data-orientation=vertical] > sf-button > .sf-button {
    width: 100%;
    inline-size: 100%;
  }
  .sf-button-group[aria-orientation=vertical] > sf-button > .sf-button {
    width: 100%;
    inline-size: 100%;
  }
  .sf-button-group[data-orientation=vertical] > .sf-button {
    width: 100%;
    inline-size: 100%;
  }
  .sf-button-group[aria-orientation=vertical] > .sf-button {
    width: 100%;
    inline-size: 100%;
  }
  /* A segmented control has one outer silhouette. The framework's
     `square` radius token is intentionally slightly rounded, so explicitly
     flatten only the internal joins without changing standalone buttons. */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group > sf-button:first-child:not(:last-child) > .sf-button,html:not([dir="rtl"])
  .sf-button-group > .sf-button:first-child:not(:last-child) {
    border-top-right-radius: 0;
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group > sf-button:first-child:not(:last-child) > .sf-button,html:not([dir="rtl"])
  .sf-button-group > .sf-button:first-child:not(:last-child) {
    border-top-right-radius: 0;
    }
  }
  .sf-button-group > sf-button:first-child:not(:last-child) > .sf-button:where(:dir(ltr)),
  .sf-button-group > .sf-button:first-child:not(:last-child):where(:dir(ltr)) {
    border-top-right-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group > sf-button:first-child:not(:last-child) > .sf-button,[dir="rtl"]
  .sf-button-group > .sf-button:first-child:not(:last-child) {
    border-top-left-radius: 0;
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-button-group > sf-button:first-child:not(:last-child) > .sf-button,[dir="rtl"]
  .sf-button-group > .sf-button:first-child:not(:last-child) {
    border-top-left-radius: 0;
    }
  }
  .sf-button-group > sf-button:first-child:not(:last-child) > .sf-button:where(:dir(rtl)),
  .sf-button-group > .sf-button:first-child:not(:last-child):where(:dir(rtl)) {
    border-top-left-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group > sf-button:first-child:not(:last-child) > .sf-button,html:not([dir="rtl"])
  .sf-button-group > .sf-button:first-child:not(:last-child) {
    border-bottom-right-radius: 0;
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group > sf-button:first-child:not(:last-child) > .sf-button,html:not([dir="rtl"])
  .sf-button-group > .sf-button:first-child:not(:last-child) {
    border-bottom-right-radius: 0;
    }
  }
  .sf-button-group > sf-button:first-child:not(:last-child) > .sf-button:where(:dir(ltr)),
  .sf-button-group > .sf-button:first-child:not(:last-child):where(:dir(ltr)) {
    border-bottom-right-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group > sf-button:first-child:not(:last-child) > .sf-button,[dir="rtl"]
  .sf-button-group > .sf-button:first-child:not(:last-child) {
    border-bottom-left-radius: 0;
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-button-group > sf-button:first-child:not(:last-child) > .sf-button,[dir="rtl"]
  .sf-button-group > .sf-button:first-child:not(:last-child) {
    border-bottom-left-radius: 0;
    }
  }
  .sf-button-group > sf-button:first-child:not(:last-child) > .sf-button:where(:dir(rtl)),
  .sf-button-group > .sf-button:first-child:not(:last-child):where(:dir(rtl)) {
    border-bottom-left-radius: 0;
  }
  .sf-button-group > sf-button:first-child:not(:last-child) > .sf-button,
  .sf-button-group > .sf-button:first-child:not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
  .sf-button-group > sf-button:not(:first-child):not(:last-child) > .sf-button,
  .sf-button-group > .sf-button:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group > sf-button:last-child:not(:first-child) > .sf-button,html:not([dir="rtl"])
  .sf-button-group > .sf-button:last-child:not(:first-child) {
    border-top-left-radius: 0;
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group > sf-button:last-child:not(:first-child) > .sf-button,html:not([dir="rtl"])
  .sf-button-group > .sf-button:last-child:not(:first-child) {
    border-top-left-radius: 0;
    }
  }
  .sf-button-group > sf-button:last-child:not(:first-child) > .sf-button:where(:dir(ltr)),
  .sf-button-group > .sf-button:last-child:not(:first-child):where(:dir(ltr)) {
    border-top-left-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group > sf-button:last-child:not(:first-child) > .sf-button,[dir="rtl"]
  .sf-button-group > .sf-button:last-child:not(:first-child) {
    border-top-right-radius: 0;
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-button-group > sf-button:last-child:not(:first-child) > .sf-button,[dir="rtl"]
  .sf-button-group > .sf-button:last-child:not(:first-child) {
    border-top-right-radius: 0;
    }
  }
  .sf-button-group > sf-button:last-child:not(:first-child) > .sf-button:where(:dir(rtl)),
  .sf-button-group > .sf-button:last-child:not(:first-child):where(:dir(rtl)) {
    border-top-right-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group > sf-button:last-child:not(:first-child) > .sf-button,html:not([dir="rtl"])
  .sf-button-group > .sf-button:last-child:not(:first-child) {
    border-bottom-left-radius: 0;
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group > sf-button:last-child:not(:first-child) > .sf-button,html:not([dir="rtl"])
  .sf-button-group > .sf-button:last-child:not(:first-child) {
    border-bottom-left-radius: 0;
    }
  }
  .sf-button-group > sf-button:last-child:not(:first-child) > .sf-button:where(:dir(ltr)),
  .sf-button-group > .sf-button:last-child:not(:first-child):where(:dir(ltr)) {
    border-bottom-left-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group > sf-button:last-child:not(:first-child) > .sf-button,[dir="rtl"]
  .sf-button-group > .sf-button:last-child:not(:first-child) {
    border-bottom-right-radius: 0;
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-button-group > sf-button:last-child:not(:first-child) > .sf-button,[dir="rtl"]
  .sf-button-group > .sf-button:last-child:not(:first-child) {
    border-bottom-right-radius: 0;
    }
  }
  .sf-button-group > sf-button:last-child:not(:first-child) > .sf-button:where(:dir(rtl)),
  .sf-button-group > .sf-button:last-child:not(:first-child):where(:dir(rtl)) {
    border-bottom-right-radius: 0;
  }
  .sf-button-group > sf-button:last-child:not(:first-child) > .sf-button,
  .sf-button-group > .sf-button:last-child:not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
  .sf-button-group > sf-button[focus-within],
  .sf-button-group > .sf-button.focus-visible,
  .sf-button-group > [aria-pressed=true],
  .sf-button-group > .active {
    position: relative;
    z-index: 1;
  }
  .sf-button-group > sf-button:focus-within,
  .sf-button-group > .sf-button.focus-visible,
  .sf-button-group > [aria-pressed=true],
  .sf-button-group > .active {
    position: relative;
    z-index: 1;
  }
  .sf-button-group > sf-button[focus-within],
  .sf-button-group > .sf-button.focus-visible,
  .sf-button-group > [aria-pressed=true],
  .sf-button-group > .active {
    position: relative;
    z-index: 1;
  }
  .sf-button-group > sf-button[focus-within],
  .sf-button-group > .sf-button:focus-visible,
  .sf-button-group > [aria-pressed=true],
  .sf-button-group > .active {
    position: relative;
    z-index: 1;
  }
  .sf-button-group > sf-button:focus-within,
  .sf-button-group > .sf-button:focus-visible,
  .sf-button-group > [aria-pressed=true],
  .sf-button-group > .active {
    position: relative;
    z-index: 1;
  }
}
@layer sf.override {
  /* Button variants use different border colours. Inside a segmented control
     that produced transparent horizontal edges and two competing vertical
     edges around the selected item. The group owns one continuous perimeter:
     every item draws block edges, while only the item on the left draws each
     internal join. Selection changes fill and text, never border geometry. */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme] > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-] {
    border-left-width: 0;
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme] > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-] {
    border-left-width: 0;
    }
  }
  .sf-button-group > sf-button[segment][type][scheme] > .sf-button[class*=segment-]:where(:dir(ltr)),
  .sf-button-group > .sf-button[class*=segment-]:where(:dir(ltr)) {
    border-left-width: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme] > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-] {
    border-right-width: 0;
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme] > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-] {
    border-right-width: 0;
    }
  }
  .sf-button-group > sf-button[segment][type][scheme] > .sf-button[class*=segment-]:where(:dir(rtl)),
  .sf-button-group > .sf-button[class*=segment-]:where(:dir(rtl)) {
    border-right-width: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme] > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-] {
    border-right-width: var(--sf-px);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme] > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-] {
    border-right-width: var(--sf-px);
    }
  }
  .sf-button-group > sf-button[segment][type][scheme] > .sf-button[class*=segment-]:where(:dir(ltr)),
  .sf-button-group > .sf-button[class*=segment-]:where(:dir(ltr)) {
    border-right-width: var(--sf-px);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme] > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-] {
    border-left-width: var(--sf-px);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme] > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-] {
    border-left-width: var(--sf-px);
    }
  }
  .sf-button-group > sf-button[segment][type][scheme] > .sf-button[class*=segment-]:where(:dir(rtl)),
  .sf-button-group > .sf-button[class*=segment-]:where(:dir(rtl)) {
    border-left-width: var(--sf-px);
  }
  .sf-button-group > sf-button[segment][type][scheme] > .sf-button[class*=segment-],
  .sf-button-group > .sf-button[class*=segment-] {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: 0;
    --sf-button--border-inline-end-width: var(--sf-px);
    border-top-width: var(--sf-px);
    border-bottom-width: var(--sf-px);
    border-block-width: var(--sf-px);
    border-inline-start-width: 0;
    border-inline-end-width: var(--sf-px);
    /* The resting boundary of a control, the same role an outlined button
       takes -- --sf-outline is a step stronger, so a segmented control stood
       in a heavier line than the buttons beside it (owner, 2026-10-08). */
    border-top-color: var(--sf-outline);
    border-bottom-color: var(--sf-outline);
    border-block-color: var(--sf-outline);
    border-left-color: var(--sf-outline);
    border-right-color: var(--sf-outline);
    border-inline-color: var(--sf-outline);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    border-left-width: var(--sf-px);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    border-left-width: var(--sf-px);
    }
  }
  .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(ltr)),
  .sf-button-group > .sf-button[class*=segment-]:first-child:where(:dir(ltr)) {
    border-left-width: var(--sf-px);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    border-right-width: var(--sf-px);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    border-right-width: var(--sf-px);
    }
  }
  .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(rtl)),
  .sf-button-group > .sf-button[class*=segment-]:first-child:where(:dir(rtl)) {
    border-right-width: var(--sf-px);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    border-top-left-radius: var(--sf-button--radius);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    border-top-left-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(ltr)),
  .sf-button-group > .sf-button[class*=segment-]:first-child:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    border-top-right-radius: var(--sf-button--radius);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    border-top-right-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(rtl)),
  .sf-button-group > .sf-button[class*=segment-]:first-child:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    border-bottom-left-radius: var(--sf-button--radius);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    border-bottom-left-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(ltr)),
  .sf-button-group > .sf-button[class*=segment-]:first-child:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    border-bottom-right-radius: var(--sf-button--radius);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    border-bottom-right-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(rtl)),
  .sf-button-group > .sf-button[class*=segment-]:first-child:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    border-top-right-radius: 0;
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    border-top-right-radius: 0;
    }
  }
  .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(ltr)),
  .sf-button-group > .sf-button[class*=segment-]:first-child:where(:dir(ltr)) {
    border-top-right-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    border-top-left-radius: 0;
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    border-top-left-radius: 0;
    }
  }
  .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(rtl)),
  .sf-button-group > .sf-button[class*=segment-]:first-child:where(:dir(rtl)) {
    border-top-left-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    border-bottom-right-radius: 0;
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    border-bottom-right-radius: 0;
    }
  }
  .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(ltr)),
  .sf-button-group > .sf-button[class*=segment-]:first-child:where(:dir(ltr)) {
    border-bottom-right-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    border-bottom-left-radius: 0;
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    border-bottom-left-radius: 0;
    }
  }
  .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(rtl)),
  .sf-button-group > .sf-button[class*=segment-]:first-child:where(:dir(rtl)) {
    border-bottom-left-radius: 0;
  }
  .sf-button-group > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-],
  .sf-button-group > .sf-button[class*=segment-]:first-child {
    --sf-button--border-inline-start-width: var(--sf-px);
    border-inline-start-width: var(--sf-px);
    border-start-start-radius: var(--sf-button--radius);
    border-end-start-radius: var(--sf-button--radius);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
  .sf-button-group > sf-button[segment][type][scheme]:not(:first-child):not(:last-child) > .sf-button[class*=segment-],
  .sf-button-group > .sf-button[class*=segment-]:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-]:last-child {
    border-top-left-radius: 0;
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-]:last-child {
    border-top-left-radius: 0;
    }
  }
  .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(ltr)),
  .sf-button-group > .sf-button[class*=segment-]:last-child:where(:dir(ltr)) {
    border-top-left-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-]:last-child {
    border-top-right-radius: 0;
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-]:last-child {
    border-top-right-radius: 0;
    }
  }
  .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(rtl)),
  .sf-button-group > .sf-button[class*=segment-]:last-child:where(:dir(rtl)) {
    border-top-right-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-]:last-child {
    border-bottom-left-radius: 0;
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-]:last-child {
    border-bottom-left-radius: 0;
    }
  }
  .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(ltr)),
  .sf-button-group > .sf-button[class*=segment-]:last-child:where(:dir(ltr)) {
    border-bottom-left-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-]:last-child {
    border-bottom-right-radius: 0;
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-]:last-child {
    border-bottom-right-radius: 0;
    }
  }
  .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(rtl)),
  .sf-button-group > .sf-button[class*=segment-]:last-child:where(:dir(rtl)) {
    border-bottom-right-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-]:last-child {
    border-top-right-radius: var(--sf-button--radius);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-]:last-child {
    border-top-right-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(ltr)),
  .sf-button-group > .sf-button[class*=segment-]:last-child:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-]:last-child {
    border-top-left-radius: var(--sf-button--radius);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-]:last-child {
    border-top-left-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(rtl)),
  .sf-button-group > .sf-button[class*=segment-]:last-child:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-]:last-child {
    border-bottom-right-radius: var(--sf-button--radius);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-],html:not([dir="rtl"])
  .sf-button-group > .sf-button[class*=segment-]:last-child {
    border-bottom-right-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(ltr)),
  .sf-button-group > .sf-button[class*=segment-]:last-child:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-]:last-child {
    border-bottom-left-radius: var(--sf-button--radius);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-],[dir="rtl"]
  .sf-button-group > .sf-button[class*=segment-]:last-child {
    border-bottom-left-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(rtl)),
  .sf-button-group > .sf-button[class*=segment-]:last-child:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-button--radius);
  }
  .sf-button-group > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-],
  .sf-button-group > .sf-button[class*=segment-]:last-child {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: var(--sf-button--radius);
    border-end-end-radius: var(--sf-button--radius);
  }
  /* A vertical group uses the same one-edge-per-join rule on the block axis. */
  .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme] > .sf-button[class*=segment-] {
    --sf-button--border-top-width: 0;
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    border-top-width: 0;
    border-block-start-width: 0;
    border-bottom-width: var(--sf-px);
    border-block-end-width: var(--sf-px);
    border-left-width: var(--sf-px);
    border-right-width: var(--sf-px);
    border-inline-width: var(--sf-px);
  }
  .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme] > .sf-button[class*=segment-] {
    --sf-button--border-top-width: 0;
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    border-top-width: 0;
    border-block-start-width: 0;
    border-bottom-width: var(--sf-px);
    border-block-end-width: var(--sf-px);
    border-left-width: var(--sf-px);
    border-right-width: var(--sf-px);
    border-inline-width: var(--sf-px);
  }
  .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-] {
    --sf-button--border-top-width: 0;
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    border-top-width: 0;
    border-block-start-width: 0;
    border-bottom-width: var(--sf-px);
    border-block-end-width: var(--sf-px);
    border-left-width: var(--sf-px);
    border-right-width: var(--sf-px);
    border-inline-width: var(--sf-px);
  }
  .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-] {
    --sf-button--border-top-width: 0;
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    border-top-width: 0;
    border-block-start-width: 0;
    border-bottom-width: var(--sf-px);
    border-block-end-width: var(--sf-px);
    border-left-width: var(--sf-px);
    border-right-width: var(--sf-px);
    border-inline-width: var(--sf-px);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-top-left-radius: var(--sf-button--radius);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-top-left-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-top-right-radius: var(--sf-button--radius);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-top-right-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-top-right-radius: var(--sf-button--radius);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-top-right-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-top-left-radius: var(--sf-button--radius);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-top-left-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-bottom-left-radius: 0;
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-bottom-left-radius: 0;
    }
  }
  .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(ltr)) {
    border-bottom-left-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-bottom-right-radius: 0;
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-bottom-right-radius: 0;
    }
  }
  .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(rtl)) {
    border-bottom-right-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-bottom-right-radius: 0;
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-bottom-right-radius: 0;
    }
  }
  .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(ltr)) {
    border-bottom-right-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-bottom-left-radius: 0;
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-bottom-left-radius: 0;
    }
  }
  .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(rtl)) {
    border-bottom-left-radius: 0;
  }
  .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    --sf-button--border-top-width: var(--sf-px);
    border-top-width: var(--sf-px);
    border-block-start-width: var(--sf-px);
    border-start-start-radius: var(--sf-button--radius);
    border-start-end-radius: var(--sf-button--radius);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-top-left-radius: var(--sf-button--radius);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-top-left-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-top-right-radius: var(--sf-button--radius);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-top-right-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-top-right-radius: var(--sf-button--radius);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-top-right-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-top-left-radius: var(--sf-button--radius);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-top-left-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-bottom-left-radius: 0;
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-bottom-left-radius: 0;
    }
  }
  .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(ltr)) {
    border-bottom-left-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-bottom-right-radius: 0;
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-bottom-right-radius: 0;
    }
  }
  .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(rtl)) {
    border-bottom-right-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-bottom-right-radius: 0;
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-bottom-right-radius: 0;
    }
  }
  .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(ltr)) {
    border-bottom-right-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-bottom-left-radius: 0;
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    border-bottom-left-radius: 0;
    }
  }
  .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-]:where(:dir(rtl)) {
    border-bottom-left-radius: 0;
  }
  .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:first-child > .sf-button[class*=segment-] {
    --sf-button--border-top-width: var(--sf-px);
    border-top-width: var(--sf-px);
    border-block-start-width: var(--sf-px);
    border-start-start-radius: var(--sf-button--radius);
    border-start-end-radius: var(--sf-button--radius);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-top-left-radius: var(--sf-button--radius);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-top-left-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-top-right-radius: var(--sf-button--radius);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-top-right-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-top-right-radius: var(--sf-button--radius);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-top-right-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-top-left-radius: var(--sf-button--radius);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-top-left-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-bottom-left-radius: 0;
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-bottom-left-radius: 0;
    }
  }
  .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child:where(:dir(ltr)) {
    border-bottom-left-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-bottom-right-radius: 0;
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-bottom-right-radius: 0;
    }
  }
  .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child:where(:dir(rtl)) {
    border-bottom-right-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-bottom-right-radius: 0;
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-bottom-right-radius: 0;
    }
  }
  .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child:where(:dir(ltr)) {
    border-bottom-right-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-bottom-left-radius: 0;
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-bottom-left-radius: 0;
    }
  }
  .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child:where(:dir(rtl)) {
    border-bottom-left-radius: 0;
  }
  .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    --sf-button--border-top-width: var(--sf-px);
    border-top-width: var(--sf-px);
    border-block-start-width: var(--sf-px);
    border-start-start-radius: var(--sf-button--radius);
    border-start-end-radius: var(--sf-button--radius);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-top-left-radius: var(--sf-button--radius);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-top-left-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-top-right-radius: var(--sf-button--radius);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-top-right-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-top-right-radius: var(--sf-button--radius);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-top-right-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-top-left-radius: var(--sf-button--radius);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-top-left-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-bottom-left-radius: 0;
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-bottom-left-radius: 0;
    }
  }
  .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child:where(:dir(ltr)) {
    border-bottom-left-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-bottom-right-radius: 0;
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-bottom-right-radius: 0;
    }
  }
  .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child:where(:dir(rtl)) {
    border-bottom-right-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-bottom-right-radius: 0;
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-bottom-right-radius: 0;
    }
  }
  .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child:where(:dir(ltr)) {
    border-bottom-right-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-bottom-left-radius: 0;
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    border-bottom-left-radius: 0;
    }
  }
  .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child:where(:dir(rtl)) {
    border-bottom-left-radius: 0;
  }
  .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:first-child {
    --sf-button--border-top-width: var(--sf-px);
    border-top-width: var(--sf-px);
    border-block-start-width: var(--sf-px);
    border-start-start-radius: var(--sf-button--radius);
    border-start-end-radius: var(--sf-button--radius);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-top-left-radius: 0;
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-top-left-radius: 0;
    }
  }
  .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(ltr)) {
    border-top-left-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-top-right-radius: 0;
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-top-right-radius: 0;
    }
  }
  .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(rtl)) {
    border-top-right-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-top-right-radius: 0;
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-top-right-radius: 0;
    }
  }
  .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(ltr)) {
    border-top-right-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-top-left-radius: 0;
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-top-left-radius: 0;
    }
  }
  .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(rtl)) {
    border-top-left-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-bottom-left-radius: var(--sf-button--radius);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-bottom-left-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-bottom-right-radius: var(--sf-button--radius);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-bottom-right-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-bottom-right-radius: var(--sf-button--radius);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-bottom-right-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-bottom-left-radius: var(--sf-button--radius);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-bottom-left-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-button--radius);
  }
  .sf-button-group[data-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    border-end-start-radius: var(--sf-button--radius);
    border-end-end-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-top-left-radius: 0;
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-top-left-radius: 0;
    }
  }
  .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(ltr)) {
    border-top-left-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-top-right-radius: 0;
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-top-right-radius: 0;
    }
  }
  .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(rtl)) {
    border-top-right-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-top-right-radius: 0;
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-top-right-radius: 0;
    }
  }
  .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(ltr)) {
    border-top-right-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-top-left-radius: 0;
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-top-left-radius: 0;
    }
  }
  .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(rtl)) {
    border-top-left-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-bottom-left-radius: var(--sf-button--radius);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-bottom-left-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-bottom-right-radius: var(--sf-button--radius);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-bottom-right-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-bottom-right-radius: var(--sf-button--radius);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-bottom-right-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-bottom-left-radius: var(--sf-button--radius);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-bottom-left-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-button--radius);
  }
  .sf-button-group[aria-orientation=vertical] > sf-button[segment][type][scheme]:last-child > .sf-button[class*=segment-] {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    border-end-start-radius: var(--sf-button--radius);
    border-end-end-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-top-left-radius: 0;
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-top-left-radius: 0;
    }
  }
  .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child:where(:dir(ltr)) {
    border-top-left-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-top-right-radius: 0;
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-top-right-radius: 0;
    }
  }
  .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child:where(:dir(rtl)) {
    border-top-right-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-top-right-radius: 0;
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-top-right-radius: 0;
    }
  }
  .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child:where(:dir(ltr)) {
    border-top-right-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-top-left-radius: 0;
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-top-left-radius: 0;
    }
  }
  .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child:where(:dir(rtl)) {
    border-top-left-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-bottom-left-radius: var(--sf-button--radius);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-bottom-left-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-bottom-right-radius: var(--sf-button--radius);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-bottom-right-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-bottom-right-radius: var(--sf-button--radius);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-bottom-right-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-bottom-left-radius: var(--sf-button--radius);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-bottom-left-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-button--radius);
  }
  .sf-button-group[data-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    border-end-start-radius: var(--sf-button--radius);
    border-end-end-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-top-left-radius: 0;
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-top-left-radius: 0;
    }
  }
  .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child:where(:dir(ltr)) {
    border-top-left-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-top-right-radius: 0;
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-top-right-radius: 0;
    }
  }
  .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child:where(:dir(rtl)) {
    border-top-right-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-top-right-radius: 0;
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-top-right-radius: 0;
    }
  }
  .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child:where(:dir(ltr)) {
    border-top-right-radius: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-top-left-radius: 0;
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-top-left-radius: 0;
    }
  }
  .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child:where(:dir(rtl)) {
    border-top-left-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-bottom-left-radius: var(--sf-button--radius);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-bottom-left-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-bottom-right-radius: var(--sf-button--radius);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-bottom-right-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-bottom-right-radius: var(--sf-button--radius);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-bottom-right-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-button--radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-bottom-left-radius: var(--sf-button--radius);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-bottom-left-radius: var(--sf-button--radius);
    }
  }
  .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-button--radius);
  }
  .sf-button-group[aria-orientation=vertical] > .sf-button[class*=segment-]:last-child {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    border-end-start-radius: var(--sf-button--radius);
    border-end-end-radius: var(--sf-button--radius);
  }
  /* A button in a seamless group draws the same ring as a standalone one, only
     turned inwards, so it never covers the separator of its neighbour. No
     shadow is involved any more, so nothing has to be suppressed for pointer
     focus either. */
  .sf-button-group > sf-button[\:has\(\%3E\%20.sf-button.focus-visible\)] > .sf-button,
  .sf-button-group > .sf-button.focus-visible {
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-button-group > sf-button:has(> .sf-button.focus-visible) > .sf-button,
  .sf-button-group > .sf-button.focus-visible {
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-button-group > sf-button[\:has\(\%3E\%20.sf-button\:focus-visible\)] > .sf-button,
  .sf-button-group > .sf-button.focus-visible {
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-button-group > sf-button[\:has\(\%3E\%20.sf-button\:focus-visible\)] > .sf-button,
  .sf-button-group > .sf-button:focus-visible {
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-button-group > sf-button:has(> .sf-button:focus-visible) > .sf-button,
  .sf-button-group > .sf-button:focus-visible {
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  @media (forced-colors: active) {
    .sf-button-group > sf-button[\:has\(\%3E\%20.sf-button.focus-visible\)] > .sf-button,
    .sf-button-group > .sf-button.focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
      --sf-button--box-shadow: none;
    }
    .sf-button-group > sf-button:has(> .sf-button.focus-visible) > .sf-button,
    .sf-button-group > .sf-button.focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
      --sf-button--box-shadow: none;
    }
    .sf-button-group > sf-button[\:has\(\%3E\%20.sf-button\:focus-visible\)] > .sf-button,
    .sf-button-group > .sf-button.focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
      --sf-button--box-shadow: none;
    }
    .sf-button-group > sf-button[\:has\(\%3E\%20.sf-button\:focus-visible\)] > .sf-button,
    .sf-button-group > .sf-button:focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
      --sf-button--box-shadow: none;
    }
    .sf-button-group > sf-button:has(> .sf-button:focus-visible) > .sf-button,
    .sf-button-group > .sf-button:focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
      --sf-button--box-shadow: none;
    }
  }
  /* radius on the joined group: the outer corners of its one perimeter take
     the named radius, as a single sf-button would. */
  .sf-button-group.sf-button-group--radius-default:not(.sf-button-group--segmented) > sf-button > .sf-button,
  .sf-button-group.sf-button-group--radius-default:not(.sf-button-group--segmented) > .sf-button {
    --sf-button--radius: var(--sf-radius-default);
  }
  .sf-button-group.sf-button-group--radius-square:not(.sf-button-group--segmented) > sf-button > .sf-button,
  .sf-button-group.sf-button-group--radius-square:not(.sf-button-group--segmented) > .sf-button {
    --sf-button--radius: var(--sf-radius-square);
  }
  .sf-button-group.sf-button-group--radius-rounded:not(.sf-button-group--segmented) > sf-button > .sf-button,
  .sf-button-group.sf-button-group--radius-rounded:not(.sf-button-group--segmented) > .sf-button {
    --sf-button--radius: var(--sf-radius-rounded);
  }
  .sf-button-group > sf-button > .sf-button,
  .sf-button-group > .sf-button {
    transition-property: color, background-color;
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-button-group > sf-button > .sf-button,
    .sf-button-group > .sf-button {
      transition-duration: 0s;
    }
  }
}
/* The segmented appearance (simai/ui-source#4): one sunken track on a
   container fill, borderless segments on it, and a plate under the selected
   one. The selection model is the group's own -- a radiogroup, arrow keys,
   change -- only the look differs. The group sits on the button ladder: the
   track is exactly as tall as an sf-button of the same size and spacing, and
   the segments inside are a step smaller -- the compact step (simai/ui-source#9,
   reversing the first rule, where the track added its padding to a
   button-sized segment). The track's padding is that difference: a button's
   default block padding minus its compact one; at 1/3, which has no smaller
   compact step, it is a2. A segment takes the button's block padding minus the
   track's, so whatever spacing the group asks for, the track stays as tall as
   a button of it. The track pads by the gap between segments, and the plate's
   radius is the track's minus that padding, so the corners are concentric. The plate is a
   button-sized segment, so it takes the button's radius for the value
   (radius="default|square|rounded" as sf-button reads it) and the track is
   that radius plus the padding: rounded makes both pills.

   In a narrow container the track scrolls inside itself, as every button group
   does; it never widens the page. full-width shares the width equally instead.

   Public variables (core/contracts/public-variables.v1.json), read here and
   never set by the Framework: --sf-button-group-background-color (the track),
   --sf-button-group-padding, --sf-button-group-radius (the plate's corners),
   --sf-button-group-color (a segment's ink),
   --sf-button-group-plate-background-color, --sf-button-group-plate-color and
   --sf-button-group-count-color. */
@layer sf.components {
  .sf-button-group.sf-button-group--segmented {
    --sf-button-group--padding: var(--sf-button-group-padding, calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-ui-1--space-y-tightness-low)));
    /* The plate is a button-sized segment and takes a button's radius; the
       track is that radius plus its padding, so the corners are concentric. */
    --sf-button-group--plate-radius: var(--sf-button-group-radius, var(--sf-button-radius, var(--sf-radius--ui)));
    --sf-button-group--radius: calc(var(--sf-button-group--plate-radius) + var(--sf-button-group--padding));
    --sf-button-group--count-gap: var(--sf-ui-1--text-space-x);
    --sf-button-group--text-size: var(--sf-text-size-1);
    --sf-button-group--text-height: var(--sf-text-height-1);
    box-sizing: border-box;
    gap: var(--sf-button-group--padding);
    padding: var(--sf-button-group--padding);
    border-radius: var(--sf-button-group--radius);
    /* The track is a translucent container fill, so the dimmed ink on it is the
       container's: 4.5:1 over the surfaces 0 to 3 in both themes. */
    background-color: var(--sf-surface-container);
    background-color: var(--sf-button-group-background-color, var(--sf-surface-container));
    --sf-on-surface-variant: var(--sf-on-surface-container--variant);
  }
  /* The size ladder: the track takes the button's height, its padding the
     difference to the compact step, the count the label's step. */
  .sf-button-group--segmented.sf-button-group--size-1\/3 {
    --sf-button-group--padding: var(--sf-button-group-padding, var(--sf-a2));
    --sf-button-group--count-gap: var(--sf-ui-1\/3--text-space-x);
    --sf-button-group--text-size: var(--sf-text-size-1\/3);
    --sf-button-group--text-height: var(--sf-text-height-1\/3);
  }
  .sf-button-group--segmented.sf-button-group--size-1\/2 {
    --sf-button-group--padding: var(--sf-button-group-padding, calc(var(--sf-ui-1\/2--space-y-tightness-default) - var(--sf-ui-1\/2--space-y-tightness-low)));
    --sf-button-group--count-gap: var(--sf-ui-1\/2--text-space-x);
    --sf-button-group--text-size: var(--sf-text-size-1\/2);
    --sf-button-group--text-height: var(--sf-text-height-1\/2);
  }
  .sf-button-group--segmented.sf-button-group--size-2 {
    --sf-button-group--padding: var(--sf-button-group-padding, calc(var(--sf-ui-2--space-y-tightness-default) - var(--sf-ui-2--space-y-tightness-low)));
    --sf-button-group--count-gap: var(--sf-ui-2--text-space-x);
    --sf-button-group--text-size: var(--sf-text-size-2);
    --sf-button-group--text-height: var(--sf-text-height-2);
  }
  .sf-button-group--segmented.sf-button-group--size-3 {
    --sf-button-group--padding: var(--sf-button-group-padding, calc(var(--sf-ui-3--space-y-tightness-default) - var(--sf-ui-3--space-y-tightness-low)));
    --sf-button-group--count-gap: var(--sf-ui-3--text-space-x);
    --sf-button-group--text-size: var(--sf-text-size-3);
    --sf-button-group--text-height: var(--sf-text-height-3);
  }
  .sf-button-group--segmented.sf-button-group--full-width {
    display: flex;
    width: 100%;
    inline-size: 100%;
  }
  /* radius, as on sf-button: the plate takes the radius a button of that
     value reads, and the track follows it concentrically. The attribute wins
     over --sf-button-group-radius, as a button's class wins over its variable. */
  .sf-button-group--segmented.sf-button-group--radius-default {
    --sf-button-group--plate-radius: var(--sf-radius-default);
  }
  /* --sf-radius-square is a unitless 0, which calc() cannot add to the
     padding; the plate takes a zero length instead. */
  .sf-button-group--segmented.sf-button-group--radius-square {
    --sf-button-group--plate-radius: calc(var(--sf-px) * 0);
  }
  .sf-button-group--segmented.sf-button-group--radius-rounded {
    --sf-button-group--plate-radius: var(--sf-radius-rounded);
  }
}
@layer sf.override {
  /* A segment draws every state itself: the button sheet's link look and its
     states would otherwise paint a link over the track. */
  .sf-button-group--segmented > .sf-button-group-segment {
    --sf-button--border-top-width: 0;
    --sf-button--border-bottom-width: 0;
    --sf-button--border-inline-start-width: 0;
    --sf-button--border-inline-end-width: 0;
    --sf-button--background-color: transparent;
    --sf-button--box-shadow: none;
    /* A segment is the button less the track's padding on each side, so the
       track is as tall as the button; never below zero. */
    --sf-button-group--segment-padding-block: max(calc(var(--sf-px) * 0), calc(var(--sf-button--padding-top) - var(--sf-button-group--padding)));
    position: relative;
    padding-top: var(--sf-button-group--segment-padding-block);
    padding-bottom: var(--sf-button-group--segment-padding-block);
    padding-block: var(--sf-button-group--segment-padding-block);
    justify-content: center;
    border-width: 0;
    border-radius: var(--sf-button-group--plate-radius);
    color: var(--sf-on-surface-variant);
    color: var(--sf-button-group-color, var(--sf-on-surface-variant));
  }
  .sf-button-group--segmented > .sf-button-group-segment .sf-button-text-container,
  .sf-button-group--segmented > .sf-button-group-segment .sf-icon {
    color: inherit;
  }
  .sf-button-group--segmented.sf-button-group--full-width > .sf-button-group-segment {
    flex: 1 1 0;
    min-width: 0;
    min-inline-size: 0;
  }
  /* An icon-only segment is square: its inline padding is its block padding.
     The class carries no "segment-" in it: the join rules match that substring. */
  .sf-button-group--segmented > .sf-button-group-icon-only {
    padding-left: var(--sf-button-group--segment-padding-block);
    padding-right: var(--sf-button-group--segment-padding-block);
    padding-inline: var(--sf-button-group--segment-padding-block);
  }
  .sf-button-group--segmented .sf-button-group-label--hidden {
    position: absolute;
    width: var(--sf-px);
    inline-size: var(--sf-px);
    height: var(--sf-px);
    block-size: var(--sf-px);
    margin: calc(var(--sf-px) * -1);
    padding: 0;
    overflow: hidden;
    -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button-group--segmented .sf-button-group-count {
    margin-left: var(--sf-button-group--count-gap);
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .sf-button-group--segmented .sf-button-group-count {
    margin-left: var(--sf-button-group--count-gap);
    }
  }
  .sf-button-group--segmented .sf-button-group-count:where(:dir(ltr)) {
    margin-left: var(--sf-button-group--count-gap);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button-group--segmented .sf-button-group-count {
    margin-right: var(--sf-button-group--count-gap);
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .sf-button-group--segmented .sf-button-group-count {
    margin-right: var(--sf-button-group--count-gap);
    }
  }
  .sf-button-group--segmented .sf-button-group-count:where(:dir(rtl)) {
    margin-right: var(--sf-button-group--count-gap);
  }
  .sf-button-group--segmented .sf-button-group-count {
    -webkit-margin-start: var(--sf-button-group--count-gap);
            margin-inline-start: var(--sf-button-group--count-gap);
    color: currentColor;
    color: var(--sf-button-group-count-color, currentColor);
    font-size: var(--sf-button-group--text-size);
    line-height: var(--sf-button-group--text-height);
    -webkit-font-feature-settings: "tnum";
            font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
  }
  /* The plate. A scheme plate is the scheme's fill; a raised one is the first
     raised surface with its shadow, for a neutral look. Its ink and the count
     inside it follow the plate. */
  .sf-button-group--segmented.sf-button-group--primary > .sf-button-group-segment.active {
    --sf-button--background-color: var(--sf-button-group-plate-background-color, var(--sf-primary));
    --sf-button--focus-ink: var(--sf-on-primary);
    color: var(--sf-on-primary);
    color: var(--sf-button-group-plate-color, var(--sf-on-primary));
  }
  .sf-button-group--segmented.sf-button-group--secondary > .sf-button-group-segment.active {
    --sf-button--background-color: var(--sf-button-group-plate-background-color, var(--sf-secondary));
    --sf-button--focus-ink: var(--sf-on-secondary);
    color: var(--sf-on-secondary);
    color: var(--sf-button-group-plate-color, var(--sf-on-secondary));
  }
  .sf-button-group--segmented.sf-button-group--on-surface > .sf-button-group-segment.active {
    --sf-button--background-color: var(--sf-button-group-plate-background-color, var(--sf-on-surface));
    --sf-button--focus-ink: var(--sf-on-surface-inverse);
    color: var(--sf-on-surface-inverse);
    color: var(--sf-button-group-plate-color, var(--sf-on-surface-inverse));
  }
  .sf-button-group--segmented.sf-button-group--plate-raised > .sf-button-group-segment.active {
    --sf-button--background-color: var(--sf-button-group-plate-background-color, var(--sf-elevation-1--surface));
    --sf-on-surface-variant: var(--sf-on-elevation-1--variant);
    --sf-button--box-shadow: var(--sf-elevation-1--shadow);
    --sf-button--focus-ink: transparent;
    color: var(--sf-on-surface);
    color: var(--sf-button-group-plate-color, var(--sf-on-surface));
  }
  .sf-button-group--segmented > .sf-button-group-segment.active .sf-button-group-count {
    color: currentColor;
  }
  /* States, from the neutral alpha ramp: a segment that is not selected darkens
     one step on hover and another when pressed, and its ink comes up to the
     primary text role. The selected plate does not react to a hover. */
  .sf-button-group--segmented > .sf-button-group-segment:not(.active):not(:disabled):hover {
    --sf-button--background-color: var(--sf-alpha-8);
    color: var(--sf-on-surface);
  }
  .sf-button-group--segmented > .sf-button-group-segment:not(.active):not(:disabled):active {
    --sf-button--background-color: var(--sf-alpha-12);
    color: var(--sf-on-surface);
  }
  .sf-button-group--segmented > .sf-button-group-segment:disabled {
    color: var(--sf-on-disable);
  }
  .sf-button-group--segmented > .sf-button-group-segment.active:disabled {
    --sf-button--background-color: var(--sf-disable);
    --sf-button--box-shadow: none;
  }
  /* The ring stands around the segment, on the track's padding, rather than
     inside a plate it could share a colour with. */
  .sf-button-group--segmented > .sf-button-group-segment.focus-visible {
    outline-offset: 0;
  }
  .sf-button-group--segmented > .sf-button-group-segment:focus-visible {
    outline-offset: 0;
  }
  @media (forced-colors: active) {
    .sf-button-group--segmented {
      border: var(--sf-px) solid CanvasText;
    }
    .sf-button-group--segmented > .sf-button-group-segment.active {
      forced-color-adjust: none;
      background-color: Highlight;
      color: HighlightText;
    }
    .sf-button-group--segmented > .sf-button-group-segment:disabled {
      color: GrayText;
    }
    .sf-button-group--segmented > .sf-button-group-segment.focus-visible {
      outline: var(--sf-focus-outline-width) solid CanvasText;
      outline-offset: 0;
    }
    .sf-button-group--segmented > .sf-button-group-segment:focus-visible {
      outline: var(--sf-focus-outline-width) solid CanvasText;
      outline-offset: 0;
    }
  }
}

/* docara-shell-source: runtime/component/buttons/css/buttons.css */
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
/* A button's border is inside its control height: the padding gives each side's
   border back. The side widths are registered as lengths, so a unitless 0
   written by a group, a tab row or a host still subtracts; unregistered, it
   would invalidate the padding. Measured before: outline, surface and every
   segmented button stood 2px taller than its size. */
@property --sf-button--border-top-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --sf-button--border-bottom-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --sf-button--border-inline-start-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --sf-button--border-inline-end-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/center (.justify-center) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button {
    border-bottom-right-radius: var(--sf-button--radius);
    border-bottom-right-radius: var(--sf-button--border-bottom-right-radius, var(--sf-button--radius));
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button {
    border-bottom-right-radius: var(--sf-button--radius);
    border-bottom-right-radius: var(--sf-button--border-bottom-right-radius, var(--sf-button--radius));
    }
  }
  .sf-button:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-button--radius);
    border-bottom-right-radius: var(--sf-button--border-bottom-right-radius, var(--sf-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button {
    border-bottom-left-radius: var(--sf-button--radius);
    border-bottom-left-radius: var(--sf-button--border-bottom-right-radius, var(--sf-button--radius));
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-button {
    border-bottom-left-radius: var(--sf-button--radius);
    border-bottom-left-radius: var(--sf-button--border-bottom-right-radius, var(--sf-button--radius));
    }
  }
  .sf-button:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-button--radius);
    border-bottom-left-radius: var(--sf-button--border-bottom-right-radius, var(--sf-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button {
    border-bottom-left-radius: var(--sf-button--radius);
    border-bottom-left-radius: var(--sf-button--border-bottom-left-radius, var(--sf-button--radius));
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button {
    border-bottom-left-radius: var(--sf-button--radius);
    border-bottom-left-radius: var(--sf-button--border-bottom-left-radius, var(--sf-button--radius));
    }
  }
  .sf-button:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-button--radius);
    border-bottom-left-radius: var(--sf-button--border-bottom-left-radius, var(--sf-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button {
    border-bottom-right-radius: var(--sf-button--radius);
    border-bottom-right-radius: var(--sf-button--border-bottom-left-radius, var(--sf-button--radius));
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-button {
    border-bottom-right-radius: var(--sf-button--radius);
    border-bottom-right-radius: var(--sf-button--border-bottom-left-radius, var(--sf-button--radius));
    }
  }
  .sf-button:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-button--radius);
    border-bottom-right-radius: var(--sf-button--border-bottom-left-radius, var(--sf-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button {
    border-top-right-radius: var(--sf-button--radius);
    border-top-right-radius: var(--sf-button--border-top-right-radius, var(--sf-button--radius));
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button {
    border-top-right-radius: var(--sf-button--radius);
    border-top-right-radius: var(--sf-button--border-top-right-radius, var(--sf-button--radius));
    }
  }
  .sf-button:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-button--radius);
    border-top-right-radius: var(--sf-button--border-top-right-radius, var(--sf-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button {
    border-top-left-radius: var(--sf-button--radius);
    border-top-left-radius: var(--sf-button--border-top-right-radius, var(--sf-button--radius));
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-button {
    border-top-left-radius: var(--sf-button--radius);
    border-top-left-radius: var(--sf-button--border-top-right-radius, var(--sf-button--radius));
    }
  }
  .sf-button:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-button--radius);
    border-top-left-radius: var(--sf-button--border-top-right-radius, var(--sf-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button {
    border-top-left-radius: var(--sf-button--radius);
    border-top-left-radius: var(--sf-button--border-top-left-radius, var(--sf-button--radius));
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button {
    border-top-left-radius: var(--sf-button--radius);
    border-top-left-radius: var(--sf-button--border-top-left-radius, var(--sf-button--radius));
    }
  }
  .sf-button:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-button--radius);
    border-top-left-radius: var(--sf-button--border-top-left-radius, var(--sf-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button {
    border-top-right-radius: var(--sf-button--radius);
    border-top-right-radius: var(--sf-button--border-top-left-radius, var(--sf-button--radius));
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-button {
    border-top-right-radius: var(--sf-button--radius);
    border-top-right-radius: var(--sf-button--border-top-left-radius, var(--sf-button--radius));
    }
  }
  .sf-button:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-button--radius);
    border-top-right-radius: var(--sf-button--border-top-left-radius, var(--sf-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button {
    padding-left: calc(var(--sf-button--padding-inline-start) - var(--sf-button--border-inline-start-width));
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-button {
    padding-left: calc(var(--sf-button--padding-inline-start) - var(--sf-button--border-inline-start-width));
    }
  }
  .sf-button:where(:dir(ltr)) {
    padding-left: calc(var(--sf-button--padding-inline-start) - var(--sf-button--border-inline-start-width));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button {
    padding-right: calc(var(--sf-button--padding-inline-start) - var(--sf-button--border-inline-start-width));
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-button {
    padding-right: calc(var(--sf-button--padding-inline-start) - var(--sf-button--border-inline-start-width));
    }
  }
  .sf-button:where(:dir(rtl)) {
    padding-right: calc(var(--sf-button--padding-inline-start) - var(--sf-button--border-inline-start-width));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button {
    padding-right: calc(var(--sf-button--padding-inline-end) - var(--sf-button--border-inline-end-width));
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-button {
    padding-right: calc(var(--sf-button--padding-inline-end) - var(--sf-button--border-inline-end-width));
    }
  }
  .sf-button:where(:dir(ltr)) {
    padding-right: calc(var(--sf-button--padding-inline-end) - var(--sf-button--border-inline-end-width));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button {
    padding-left: calc(var(--sf-button--padding-inline-end) - var(--sf-button--border-inline-end-width));
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-button {
    padding-left: calc(var(--sf-button--padding-inline-end) - var(--sf-button--border-inline-end-width));
    }
  }
  .sf-button:where(:dir(rtl)) {
    padding-left: calc(var(--sf-button--padding-inline-end) - var(--sf-button--border-inline-end-width));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button {
    border-right-width: 0;
    border-right-width: var(--sf-button--border-inline-end-width, 0);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .sf-button {
    border-right-width: 0;
    border-right-width: var(--sf-button--border-inline-end-width, 0);
    }
  }
  .sf-button:where(:dir(ltr)) {
    border-right-width: 0;
    border-right-width: var(--sf-button--border-inline-end-width, 0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button {
    border-left-width: 0;
    border-left-width: var(--sf-button--border-inline-end-width, 0);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .sf-button {
    border-left-width: 0;
    border-left-width: var(--sf-button--border-inline-end-width, 0);
    }
  }
  .sf-button:where(:dir(rtl)) {
    border-left-width: 0;
    border-left-width: var(--sf-button--border-inline-end-width, 0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button {
    border-left-width: 0;
    border-left-width: var(--sf-button--border-inline-start-width, 0);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .sf-button {
    border-left-width: 0;
    border-left-width: var(--sf-button--border-inline-start-width, 0);
    }
  }
  .sf-button:where(:dir(ltr)) {
    border-left-width: 0;
    border-left-width: var(--sf-button--border-inline-start-width, 0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button {
    border-right-width: 0;
    border-right-width: var(--sf-button--border-inline-start-width, 0);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .sf-button {
    border-right-width: 0;
    border-right-width: var(--sf-button--border-inline-start-width, 0);
    }
  }
  .sf-button:where(:dir(rtl)) {
    border-right-width: 0;
    border-right-width: var(--sf-button--border-inline-start-width, 0);
  }
  .sf-button {
    /* Public variables (core/contracts/public-variables.v1.json): names with a
       single dash after the block, never set by the Framework, read where a
       resting look is defined -- base, size, appearance, scheme -- and not by
       hover, focus, disabled, loading or a group's segments, so states and
       joined groups still show. */
    --sf-button--radius: var(--sf-button-radius, var(--sf-radius--ui));
    border-end-end-radius: var(--sf-button--radius);
    border-end-end-radius: var(--sf-button--border-bottom-right-radius, var(--sf-button--radius));
    border-end-start-radius: var(--sf-button--radius);
    border-end-start-radius: var(--sf-button--border-bottom-left-radius, var(--sf-button--radius));
    border-start-end-radius: var(--sf-button--radius);
    border-start-end-radius: var(--sf-button--border-top-right-radius, var(--sf-button--radius));
    border-start-start-radius: var(--sf-button--radius);
    border-start-start-radius: var(--sf-button--border-top-left-radius, var(--sf-button--radius));
    -webkit-padding-start: calc(var(--sf-button--padding-inline-start) - var(--sf-button--border-inline-start-width));
            padding-inline-start: calc(var(--sf-button--padding-inline-start) - var(--sf-button--border-inline-start-width));
    padding-top: calc(var(--sf-button--padding-top) - var(--sf-button--border-top-width));
    -webkit-padding-end: calc(var(--sf-button--padding-inline-end) - var(--sf-button--border-inline-end-width));
            padding-inline-end: calc(var(--sf-button--padding-inline-end) - var(--sf-button--border-inline-end-width));
    padding-bottom: calc(var(--sf-button--padding-bottom) - var(--sf-button--border-bottom-width));
    /* The public border reaches every appearance, not only outline: a default
       button kept its border at 0 whatever --sf-button-border-width said
       (public-variables probe, 2026-10-18). Outline and a group's segments set
       the side widths after this, and win. */
    --sf-button--border-top-width: var(--sf-button-border-width, 0);
    --sf-button--border-bottom-width: var(--sf-button-border-width, 0);
    --sf-button--border-inline-start-width: var(--sf-button-border-width, 0);
    --sf-button--border-inline-end-width: var(--sf-button-border-width, 0);
    background-color: var(--sf-button--background-color);
    border-color: transparent;
    border-color: var(--sf-button--border-color, var(--sf-button-border-color, transparent));
    border-width: 0;
    border-width: var(--sf-button--border-width, 0);
    border-top-width: 0;
    border-top-width: var(--sf-button--border-top-width, 0);
    border-inline-end-width: 0;
    border-inline-end-width: var(--sf-button--border-inline-end-width, 0);
    border-bottom-width: 0;
    border-bottom-width: var(--sf-button--border-bottom-width, 0);
    border-inline-start-width: 0;
    border-inline-start-width: var(--sf-button--border-inline-start-width, 0);
    border-style: solid;
    border-style: var(--sf-button--border-style, solid);
    /* Two layers, composed rather than replaced: the focus line the ring puts
       inside the button, and whatever elevation the button already carries.
       Written as one shorthand, a focus rule would wipe the elevation. */
    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0);
    box-shadow: var(--sf-button--focus-inset, 0 0 rgba(0, 0, 0, 0)), var(--sf-button--box-shadow, 0 0 rgba(0, 0, 0, 0));
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/center (.justify-center) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button .sf-button-text-container {
    padding-right: var(--sf-button-text-container--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-button .sf-button-text-container {
    padding-right: var(--sf-button-text-container--padding-inline-end);
    }
  }
  .sf-button .sf-button-text-container:where(:dir(ltr)) {
    padding-right: var(--sf-button-text-container--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button .sf-button-text-container {
    padding-left: var(--sf-button-text-container--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-button .sf-button-text-container {
    padding-left: var(--sf-button-text-container--padding-inline-end);
    }
  }
  .sf-button .sf-button-text-container:where(:dir(rtl)) {
    padding-left: var(--sf-button-text-container--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button .sf-button-text-container {
    padding-left: var(--sf-button-text-container--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-button .sf-button-text-container {
    padding-left: var(--sf-button-text-container--padding-inline-start);
    }
  }
  .sf-button .sf-button-text-container:where(:dir(ltr)) {
    padding-left: var(--sf-button-text-container--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button .sf-button-text-container {
    padding-right: var(--sf-button-text-container--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-button .sf-button-text-container {
    padding-right: var(--sf-button-text-container--padding-inline-start);
    }
  }
  .sf-button .sf-button-text-container:where(:dir(rtl)) {
    padding-right: var(--sf-button-text-container--padding-inline-start);
  }
  .sf-button .sf-button-text-container {
    /* A control label wraps between words and never inside one. Prose in a
       table breaks mid-word by design, and a button sitting in a cell used to
       inherit that: "edit" came out on three lines and set the row height. */
    word-break: normal;
    --sf-button-text-container--background-color: transparent;
    background-color: var(--sf-button-text-container--background-color);
    color: var(--sf-button-text-container--color);
    font-family: var(--sf-button-text-container--font-family);
    font-size: var(--sf-button-text-container--font-size);
    font-weight: var(--sf-button-text-container--font-weight);
    line-height: var(--sf-button-text-container--line-height);
    -webkit-padding-end: var(--sf-button-text-container--padding-inline-end);
            padding-inline-end: var(--sf-button-text-container--padding-inline-end);
    -webkit-padding-start: var(--sf-button-text-container--padding-inline-start);
            padding-inline-start: var(--sf-button-text-container--padding-inline-start);
  }
  .sf-button .sf-icon {
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--color, var(--sf-on-surface-variant));
    font-size: var(--sf-icon-size-3);
    font-size: var(--sf-icon--font-size, var(--sf-icon-size-3));
    height: var(--sf-icon-size-3);
    height: var(--sf-icon--height, var(--sf-icon-size-3));
    width: var(--sf-icon-size-3);
    width: var(--sf-icon--width, var(--sf-icon-size-3));
  }
  .sf-button.sf-button--default.sf-button--primary {
    --sf-button--background-color: var(--sf-button-background-color, var(--sf-primary));
  }
  .sf-button.sf-button--default.sf-button--secondary {
    --sf-button--background-color: var(--sf-button-background-color, var(--sf-secondary));
  }
  .sf-button.sf-button--size-1 .sf-button-text-container {
    --sf-button-text-container--padding-inline-end: var(--sf-ui-1--text-space-x);
    --sf-button-text-container--padding-inline-start: var(--sf-ui-1--text-space-x);
  }
  .sf-button.sf-button--size-1.sf-button--tonal.sf-button--secondary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1);
    --sf-button-text-container--line-height: var(--sf-text-height-1);
  }
  .sf-button.sf-button--size-1.sf-button--tonal.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1);
    --sf-button-text-container--line-height: var(--sf-text-height-1);
  }
  .sf-button.sf-button--size-1.sf-button--link.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1);
    --sf-button-text-container--line-height: var(--sf-text-height-1);
  }
  .sf-button.sf-button--size-1.sf-button--ghost.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1);
    --sf-button-text-container--line-height: var(--sf-text-height-1);
  }
  .sf-button.sf-button--size-1.sf-button--link.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1);
    --sf-button-text-container--line-height: var(--sf-text-height-1);
  }
  .sf-button.sf-button--size-1.sf-button--ghost.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1);
    --sf-button-text-container--line-height: var(--sf-text-height-1);
  }
  .sf-button.sf-button--size-1.sf-button--default.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--default.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--default.sf-button--secondary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1);
    --sf-button-text-container--line-height: var(--sf-text-height-1);
  }
  .sf-button.sf-button--size-1.sf-button--tonal.sf-button--secondary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1.sf-button--tonal.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1.sf-button--link.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1.sf-button--ghost.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1.sf-button--link.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1.sf-button--ghost.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-2.sf-button--tonal.sf-button--secondary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-2.sf-button--tonal.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-2.sf-button--link.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-2.sf-button--ghost.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-2.sf-button--link.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-2.sf-button--ghost.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-3.sf-button--tonal.sf-button--secondary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-3.sf-button--tonal.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-3.sf-button--link.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-3.sf-button--ghost.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-3.sf-button--link.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-3.sf-button--ghost.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1\/2.sf-button--tonal.sf-button--secondary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1\/2.sf-button--tonal.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1\/2.sf-button--link.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1\/2.sf-button--ghost.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1\/2.sf-button--link.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1\/2.sf-button--ghost.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1\/3.sf-button--tonal.sf-button--secondary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1\/3.sf-button--tonal.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1\/3.sf-button--link.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1\/3.sf-button--ghost.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1\/3.sf-button--link.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1\/3.sf-button--ghost.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1.sf-button--default.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--default.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--default.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--default.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--default.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--default.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--default.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--default.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--default.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--default.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--default.sf-button--secondary .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--default.sf-button--secondary .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--default.sf-button--secondary .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--default.sf-button--secondary .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--default.sf-button--secondary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--default.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-on-primary));
  }
  .sf-button.sf-button--default.sf-button--secondary .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-on-secondary));
  }
  .sf-button.sf-button--default.sf-button--primary .sf-icon {
    --sf-icon--color: var(--sf-on-primary);
  }
  .sf-button.sf-button--default.sf-button--secondary .sf-icon {
    --sf-icon--color: var(--sf-on-secondary);
  }
  .sf-button.sf-button--default.sf-button--on-surface {
    --sf-button--background-color: var(--sf-button-background-color, var(--sf-on-surface));
  }
  .sf-button.sf-button--default.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-on-surface-inverse));
  }
  .sf-button.sf-button--default.sf-button--on-surface .sf-icon {
    --sf-icon--color: var(--sf-on-surface-inverse);
  }
  .sf-button.sf-button--tonal.sf-button--secondary {
    --sf-button--background-color: var(--sf-button-background-color, var(--sf-secondary-container));
  }
  .sf-button.sf-button--tonal.sf-button--primary {
    --sf-button--background-color: var(--sf-button-background-color, var(--sf-primary-container));
  }
  .sf-button.sf-button--tonal.sf-button--secondary .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-on-secondary-container));
  }
  .sf-button.sf-button--tonal.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-on-primary-container));
  }
  .sf-button.sf-button--tonal.sf-button--secondary .sf-icon {
    --sf-icon--color: var(--sf-on-secondary-container);
  }
  .sf-button.sf-button--tonal.sf-button--primary .sf-icon {
    --sf-icon--color: var(--sf-on-primary-container);
  }
  .sf-button.sf-button--tonal.sf-button--on-surface {
    --sf-button--background-color: var(--sf-button-background-color, var(--sf-surface-container));
    --sf-on-surface-variant: var(--sf-on-surface-container--variant);
  }
  .sf-button.sf-button--link.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-on-surface));
  }
  .sf-button.sf-button--ghost.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-on-surface));
  }
  .sf-button.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--outline.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-on-surface));
  }
  .sf-button.sf-button--link.sf-button--on-surface .sf-icon {
    --sf-icon--color: var(--sf-on-surface);
  }
  .sf-button.sf-button--ghost.sf-button--on-surface .sf-icon {
    --sf-icon--color: var(--sf-on-surface);
  }
  .sf-button.sf-button--tonal.sf-button--on-surface .sf-icon, .sf-button.sf-button--outline.sf-button--on-surface .sf-icon {
    --sf-icon--color: var(--sf-on-surface);
  }
  .sf-button.sf-button--outline.sf-button--primary, .sf-button.sf-button--outline.sf-button--on-surface {
    --sf-button--background-color: var(--sf-button-background-color, transparent);
    --sf-button--border-color: var(--sf-button-border-color, var(--sf-outline));
  }
  .sf-button.sf-button--link.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-primary));
  }
  .sf-button.sf-button--ghost.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-primary));
  }
  .sf-button.sf-button--outline.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-primary));
  }
  .sf-button.sf-button--link.sf-button--primary .sf-icon {
    --sf-icon--color: var(--sf-primary);
  }
  .sf-button.sf-button--ghost.sf-button--primary .sf-icon {
    --sf-icon--color: var(--sf-primary);
  }
  .sf-button.sf-button--outline.sf-button--primary .sf-icon {
    --sf-icon--color: var(--sf-primary);
  }
  .sf-button.sf-button--link.sf-button--primary {
    --sf-button--background-color: var(--sf-button-background-color, transparent);
  }
  .sf-button.sf-button--ghost.sf-button--primary {
    --sf-button--background-color: var(--sf-button-background-color, transparent);
  }
  .sf-button.sf-button--link.sf-button--on-surface {
    --sf-button--background-color: var(--sf-button-background-color, transparent);
  }
  .sf-button.sf-button--ghost.sf-button--on-surface {
    --sf-button--background-color: var(--sf-button-background-color, transparent);
  }
  .sf-button.sf-button--loading.sf-button--default.sf-button--primary, .sf-button.sf-button--loading.sf-button--default.sf-button--secondary {
    --sf-button--background-color: var(--sf-button-background-color, transparent);
  }
  .sf-button.sf-button--size-2 .sf-button-text-container {
    --sf-button-text-container--padding-inline-end: var(--sf-ui-2--text-space-x);
    --sf-button-text-container--padding-inline-start: var(--sf-ui-2--text-space-x);
  }
  .sf-button.sf-button--size-2.sf-button--tonal.sf-button--secondary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-2);
    --sf-button-text-container--line-height: var(--sf-text-height-2);
  }
  .sf-button.sf-button--size-2.sf-button--tonal.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-2);
    --sf-button-text-container--line-height: var(--sf-text-height-2);
  }
  .sf-button.sf-button--size-2.sf-button--link.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-2);
    --sf-button-text-container--line-height: var(--sf-text-height-2);
  }
  .sf-button.sf-button--size-2.sf-button--ghost.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-2);
    --sf-button-text-container--line-height: var(--sf-text-height-2);
  }
  .sf-button.sf-button--size-2.sf-button--link.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-2);
    --sf-button-text-container--line-height: var(--sf-text-height-2);
  }
  .sf-button.sf-button--size-2.sf-button--ghost.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-2);
    --sf-button-text-container--line-height: var(--sf-text-height-2);
  }
  .sf-button.sf-button--size-2.sf-button--default.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--default.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--default.sf-button--secondary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-2);
    --sf-button-text-container--line-height: var(--sf-text-height-2);
  }
  .sf-button.sf-button--size-3 .sf-button-text-container {
    --sf-button-text-container--padding-inline-end: var(--sf-ui-3--text-space-x);
    --sf-button-text-container--padding-inline-start: var(--sf-ui-3--text-space-x);
  }
  .sf-button.sf-button--size-3.sf-button--tonal.sf-button--secondary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-3);
    --sf-button-text-container--line-height: var(--sf-text-height-3);
  }
  .sf-button.sf-button--size-3.sf-button--tonal.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-3);
    --sf-button-text-container--line-height: var(--sf-text-height-3);
  }
  .sf-button.sf-button--size-3.sf-button--link.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-3);
    --sf-button-text-container--line-height: var(--sf-text-height-3);
  }
  .sf-button.sf-button--size-3.sf-button--ghost.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-3);
    --sf-button-text-container--line-height: var(--sf-text-height-3);
  }
  .sf-button.sf-button--size-3.sf-button--link.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-3);
    --sf-button-text-container--line-height: var(--sf-text-height-3);
  }
  .sf-button.sf-button--size-3.sf-button--ghost.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-3);
    --sf-button-text-container--line-height: var(--sf-text-height-3);
  }
  .sf-button.sf-button--size-3.sf-button--default.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--default.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--default.sf-button--secondary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-3);
    --sf-button-text-container--line-height: var(--sf-text-height-3);
  }
  .sf-button.sf-button--size-1\/2 .sf-button-text-container {
    --sf-button-text-container--padding-inline-end: var(--sf-ui-1\/2--text-space-x);
    --sf-button-text-container--padding-inline-start: var(--sf-ui-1\/2--text-space-x);
  }
  .sf-button.sf-button--size-1\/2.sf-button--tonal.sf-button--secondary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/2);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-button.sf-button--size-1\/2.sf-button--tonal.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/2);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-button.sf-button--size-1\/2.sf-button--link.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/2);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-button.sf-button--size-1\/2.sf-button--ghost.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/2);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-button.sf-button--size-1\/2.sf-button--link.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/2);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-button.sf-button--size-1\/2.sf-button--ghost.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/2);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-button.sf-button--size-1\/2.sf-button--default.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--default.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--default.sf-button--secondary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/2);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-button.sf-button--size-1\/3 .sf-button-text-container {
    --sf-button-text-container--padding-inline-end: var(--sf-ui-1\/3--text-space-x);
    --sf-button-text-container--padding-inline-start: var(--sf-ui-1\/3--text-space-x);
  }
  .sf-button.sf-button--size-1\/3.sf-button--tonal.sf-button--secondary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/3);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/3);
  }
  .sf-button.sf-button--size-1\/3.sf-button--tonal.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/3);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/3);
  }
  .sf-button.sf-button--size-1\/3.sf-button--link.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/3);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/3);
  }
  .sf-button.sf-button--size-1\/3.sf-button--ghost.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/3);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/3);
  }
  .sf-button.sf-button--size-1\/3.sf-button--link.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/3);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/3);
  }
  .sf-button.sf-button--size-1\/3.sf-button--ghost.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/3);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/3);
  }
  .sf-button.sf-button--size-1\/3.sf-button--default.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--default.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--default.sf-button--secondary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/3);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/3);
  }
  .sf-button--size-1 {
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1--space-y-tightness-default));
    --sf-button--padding-inline-end: var(--sf-button-padding-inline, var(--sf-ui-1--space-x));
    --sf-button--padding-inline-start: var(--sf-button-padding-inline, var(--sf-ui-1--space-x));
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1--space-y-tightness-default));
  }
  .sf-button.sf-button--size-1 .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1);
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-button--size-1.tightness-low {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1--space-y-tightness-low));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1--space-y-tightness-low));
  }
  .sf-button--size-1.spacing-compact {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1--space-y-tightness-low));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1--space-y-tightness-low));
  }
  .sf-button--size-1.tightness-high {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1--space-y-tightness-high));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1--space-y-tightness-high));
  }
  .sf-button--size-1.spacing-comfortable {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1--space-y-tightness-high));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1--space-y-tightness-high));
  }
  .sf-button--size-1.tightness-highest {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));
  }
  .sf-button--size-1.spacing-spacious {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));
  }
  .sf-button--size-2 {
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-2--space-y-tightness-default));
    --sf-button--padding-inline-end: var(--sf-button-padding-inline, var(--sf-ui-2--space-x));
    --sf-button--padding-inline-start: var(--sf-button-padding-inline, var(--sf-ui-2--space-x));
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-2--space-y-tightness-default));
  }
  .sf-button.sf-button--size-2 .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-2);
    --sf-icon--height: var(--sf-text-height-2);
    --sf-icon--width: var(--sf-text-height-2);
  }
  .sf-button--size-2.tightness-low {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-2--space-y-tightness-low));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-2--space-y-tightness-low));
  }
  .sf-button--size-2.spacing-compact {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-2--space-y-tightness-low));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-2--space-y-tightness-low));
  }
  .sf-button--size-2.tightness-high {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-2--space-y-tightness-high));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-2--space-y-tightness-high));
  }
  .sf-button--size-2.spacing-comfortable {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-2--space-y-tightness-high));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-2--space-y-tightness-high));
  }
  .sf-button--size-2.tightness-highest {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));
  }
  .sf-button--size-2.spacing-spacious {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));
  }
  .sf-button--size-3 {
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-3--space-y-tightness-default));
    --sf-button--padding-inline-end: var(--sf-button-padding-inline, var(--sf-ui-3--space-x));
    --sf-button--padding-inline-start: var(--sf-button-padding-inline, var(--sf-ui-3--space-x));
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-3--space-y-tightness-default));
  }
  .sf-button.sf-button--size-3 .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-3);
    --sf-icon--height: var(--sf-text-height-3);
    --sf-icon--width: var(--sf-text-height-3);
  }
  .sf-button--size-3.tightness-low {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-3--space-y-tightness-low));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-3--space-y-tightness-low));
  }
  .sf-button--size-3.spacing-compact {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-3--space-y-tightness-low));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-3--space-y-tightness-low));
  }
  .sf-button--size-3.tightness-high {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-3--space-y-tightness-high));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-3--space-y-tightness-high));
  }
  .sf-button--size-3.spacing-comfortable {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-3--space-y-tightness-high));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-3--space-y-tightness-high));
  }
  .sf-button--size-3.tightness-highest {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));
  }
  .sf-button--size-3.spacing-spacious {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));
  }
  .sf-button--size-1\/2 {
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-default));
    --sf-button--padding-inline-end: var(--sf-button-padding-inline, var(--sf-ui-1\/2--space-x));
    --sf-button--padding-inline-start: var(--sf-button-padding-inline, var(--sf-ui-1\/2--space-x));
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-default));
  }
  .sf-button.sf-button--size-1\/2 .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1\/2);
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-button--size-1\/2.tightness-low {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));
  }
  .sf-button--size-1\/2.spacing-compact {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));
  }
  .sf-button--size-1\/2.tightness-high {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));
  }
  .sf-button--size-1\/2.spacing-comfortable {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));
  }
  .sf-button--size-1\/2.tightness-highest {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));
  }
  .sf-button--size-1\/2.spacing-spacious {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));
  }
  .sf-button--size-1\/3 {
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-default));
    --sf-button--padding-inline-end: var(--sf-button-padding-inline, var(--sf-ui-1\/3--space-x));
    --sf-button--padding-inline-start: var(--sf-button-padding-inline, var(--sf-ui-1\/3--space-x));
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-default));
  }
  .sf-button.sf-button--size-1\/3 .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1\/3);
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-button--size-1\/3.tightness-low {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));
  }
  .sf-button--size-1\/3.spacing-compact {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));
  }
  .sf-button--size-1\/3.tightness-high {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));
  }
  .sf-button--size-1\/3.spacing-comfortable {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));
  }
  .sf-button--size-1\/3.tightness-highest {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));
  }
  .sf-button--size-1\/3.spacing-spacious {
    --sf-button--padding-top: var(--sf-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));
    --sf-button--padding-bottom: var(--sf-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));
  }
  .sf-button--outline {
    --sf-button--border-bottom-width: var(--sf-button-border-width, var(--sf-px));
    --sf-button--border-inline-end-width: var(--sf-button-border-width, var(--sf-px));
    --sf-button--border-inline-start-width: var(--sf-button-border-width, var(--sf-px));
    --sf-button--border-style: solid;
    --sf-button--border-top-width: var(--sf-button-border-width, var(--sf-px));
    --sf-button--border-width: var(--sf-px);
  }
  .sf-button.radius-default {
    border-radius: var(--sf-radius-default);
  }
  .sf-button.radius-square {
    border-radius: var(--sf-radius-square);
  }
  .sf-button.radius-rounded {
    border-radius: var(--sf-radius-rounded);
  }
  .sf-button.segment-start {
    --sf-button--border-top-right-radius: var(--sf-radius-square);
    --sf-button--border-bottom-right-radius: var(--sf-radius-square);
    --sf-button--border-inline-end-width: var(--sf-px);
  }
  .sf-button.segment-middle {
    --sf-button--border-top-left-radius: var(--sf-radius-square);
    --sf-button--border-top-right-radius: var(--sf-radius-square);
    --sf-button--border-bottom-right-radius: var(--sf-radius-square);
    --sf-button--border-bottom-left-radius: var(--sf-radius-square);
    --sf-button--border-inline-start-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button.segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  html:not([dir="rtl"]) .sf-button.segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-button.segment-end:where(:dir(ltr)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button.segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  [dir="rtl"] .sf-button.segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-button.segment-end:where(:dir(rtl)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-button.segment-end {
    --sf-button--border-top-left-radius: var(--sf-radius-square);
    --sf-button--border-bottom-left-radius: var(--sf-radius-square);
    border-inline-start-color: transparent;
    border-inline-start-color: var(--sf-white--alfa-24, transparent);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button:not(.sf-button--outline).segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  html:not([dir="rtl"]) .sf-button:not(.sf-button--outline).segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-button:not(.sf-button--outline).segment-end:where(:dir(ltr)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button:not(.sf-button--outline).segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  [dir="rtl"] .sf-button:not(.sf-button--outline).segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-button:not(.sf-button--outline).segment-end:where(:dir(rtl)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-button:not(.sf-button--outline).segment-end {
    border-inline-start-color: transparent;
    border-inline-start-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button:not(.sf-button--outline).segment-start {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  html:not([dir="rtl"]) .sf-button:not(.sf-button--outline).segment-start {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-button:not(.sf-button--outline).segment-start:where(:dir(ltr)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button:not(.sf-button--outline).segment-start {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  [dir="rtl"] .sf-button:not(.sf-button--outline).segment-start {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-button:not(.sf-button--outline).segment-start:where(:dir(rtl)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-button:not(.sf-button--outline).segment-start {
    border-inline-end-color: transparent;
    border-inline-end-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button:not(.sf-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  html:not([dir="rtl"]) .sf-button:not(.sf-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-button:not(.sf-button--outline).segment-middle:where(:dir(ltr)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button:not(.sf-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  [dir="rtl"] .sf-button:not(.sf-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-button:not(.sf-button--outline).segment-middle:where(:dir(rtl)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button:not(.sf-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  html:not([dir="rtl"]) .sf-button:not(.sf-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-button:not(.sf-button--outline).segment-middle:where(:dir(ltr)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button:not(.sf-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  [dir="rtl"] .sf-button:not(.sf-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-button:not(.sf-button--outline).segment-middle:where(:dir(rtl)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-button:not(.sf-button--outline).segment-middle {
    border-inline-end-color: transparent;
    border-inline-end-color: var(--sf-white--alfa-24, transparent);
    border-inline-start-color: transparent;
    border-inline-start-color: var(--sf-white--alfa-24, transparent);
  }
  /* Surface, built on the neutral alpha ramp. It does not carry a colour of its
     own: it carries a degree of contrast against whatever is behind it, which is
     why the same declaration is right in a light and in a dark theme. It keeps a
     faint fill and a border one step stronger.

     Ghost used to be the transparent member of this pair. At rest it was
     identical to link and differed only by a hover tint of 8% instead of 16%,
     too little for anyone to choose between them, so `--ghost` now reads as
     `--link` and stays only as a compatibility name. */
  .sf-button.sf-button--surface {
    --sf-button--background-color: var(--sf-button-background-color, transparent);
  }
  .sf-button.sf-button--surface {
    --sf-button--background-color: var(--sf-button-background-color, var(--sf-alpha-4));
    --sf-button--border-color: var(--sf-button-border-color, var(--sf-alpha-8));
    --sf-button--border-bottom-width: var(--sf-button-border-width, var(--sf-px));
    --sf-button--border-inline-end-width: var(--sf-button-border-width, var(--sf-px));
    --sf-button--border-inline-start-width: var(--sf-button-border-width, var(--sf-px));
    --sf-button--border-style: solid;
    --sf-button--border-top-width: var(--sf-button-border-width, var(--sf-px));
    --sf-button--border-width: var(--sf-px);
  }
  .sf-button.sf-button--size-1.sf-button--surface .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1);
    --sf-button-text-container--line-height: var(--sf-text-height-1);
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-2.sf-button--surface .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-2);
    --sf-button-text-container--line-height: var(--sf-text-height-2);
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-3.sf-button--surface .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-3);
    --sf-button-text-container--line-height: var(--sf-text-height-3);
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1\/2.sf-button--surface .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/2);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/2);
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1\/3.sf-button--surface .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/3);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/3);
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--surface.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-on-surface));
  }
  .sf-button.sf-button--surface.sf-button--on-surface .sf-icon {
    --sf-icon--color: var(--sf-on-surface);
  }
  .sf-button.sf-button--surface.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-primary));
  }
  .sf-button.sf-button--surface.sf-button--primary .sf-icon {
    --sf-icon--color: var(--sf-primary);
  }
}
@layer sf.states {
  .sf-button.sf-button--link.sf-button--primary.focus-visible:not(:disabled):not(.disabled) {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--ghost.sf-button--primary.focus-visible:not(:disabled):not(.disabled) {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--link.sf-button--on-surface.focus-visible:not(:disabled):not(.disabled) {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--ghost.sf-button--on-surface.focus-visible:not(:disabled):not(.disabled) {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled).focus-visible, .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled).focus-visible {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--link.sf-button--primary:not(:disabled):not(.disabled).focus-visible {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--link.sf-button--primary:not(:disabled):not(.disabled):focus-visible {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--ghost.sf-button--primary:not(:disabled):not(.disabled).focus-visible {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--ghost.sf-button--primary:not(:disabled):not(.disabled):focus-visible {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--link.sf-button--on-surface:not(:disabled):not(.disabled).focus-visible {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--link.sf-button--on-surface:not(:disabled):not(.disabled):focus-visible {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--ghost.sf-button--on-surface:not(:disabled):not(.disabled).focus-visible {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--ghost.sf-button--on-surface:not(:disabled):not(.disabled):focus-visible {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled).focus-visible, .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled).focus-visible {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled):focus-visible, .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled):focus-visible {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--tonal.sf-button--secondary:disabled {
    --sf-button--background-color: var(--sf-disable);
  }
  .sf-button.sf-button--tonal.sf-button--primary:disabled {
    --sf-button--background-color: var(--sf-disable);
  }
  .sf-button.sf-button--default.sf-button--primary:disabled, .sf-button.sf-button--default.sf-button--on-surface:disabled, .sf-button.sf-button--tonal.sf-button--on-surface:disabled, .sf-button.sf-button--default.sf-button--secondary:disabled {
    --sf-button--background-color: var(--sf-disable);
  }
  .sf-button.sf-button--tonal.sf-button--secondary:disabled .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-disable);
  }
  .sf-button.sf-button--tonal.sf-button--primary:disabled .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-disable);
  }
  .sf-button.sf-button--link.sf-button--primary:disabled .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-disable);
  }
  .sf-button.sf-button--ghost.sf-button--primary:disabled .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-disable);
  }
  .sf-button.sf-button--link.sf-button--on-surface:disabled .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-disable);
  }
  .sf-button.sf-button--ghost.sf-button--on-surface:disabled .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-disable);
  }
  .sf-button.sf-button--default.sf-button--primary:disabled .sf-button-text-container, .sf-button.sf-button--default.sf-button--on-surface:disabled .sf-button-text-container, .sf-button.sf-button--tonal.sf-button--on-surface:disabled .sf-button-text-container, .sf-button.sf-button--outline.sf-button--primary:disabled .sf-button-text-container, .sf-button.sf-button--outline.sf-button--on-surface:disabled .sf-button-text-container, .sf-button.sf-button--default.sf-button--secondary:disabled .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-disable);
  }
  .sf-button.sf-button--outline.sf-button--primary:disabled {
    --sf-button--border-color: var(--sf-outline-disable);
  }
  .sf-button.sf-button--outline.sf-button--on-surface:disabled {
    --sf-button--border-color: var(--sf-outline-variant);
  }
  .sf-button.sf-button--default.sf-button--primary:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-primary-hover);
  }
  .sf-button.sf-button--default.sf-button--secondary:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-secondary-hover);
  }
  .sf-button.sf-button--default.sf-button--on-surface:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-on-surface-hover);
  }
  .sf-button.sf-button--tonal.sf-button--secondary:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-secondary-container-hover);
  }
  .sf-button.sf-button--tonal.sf-button--primary:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-button.sf-button--link.sf-button--on-surface:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-button.sf-button--ghost.sf-button--on-surface:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-button.sf-button--tonal.sf-button--on-surface:not(:disabled):not(.disabled):hover, .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-button.sf-button--link.sf-button--on-surface:not(:disabled):not(.disabled):hover .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-surface-hover);
  }
  .sf-button.sf-button--ghost.sf-button--on-surface:not(:disabled):not(.disabled):hover .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-surface-hover);
  }
  .sf-button.sf-button--tonal.sf-button--on-surface:not(:disabled):not(.disabled):hover .sf-button-text-container, .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled):hover .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-surface-hover);
  }
  .sf-button.sf-button--link.sf-button--primary:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-button.sf-button--ghost.sf-button--primary:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-button.sf-button--link.sf-button--primary:not(:disabled):not(.disabled):hover .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-primary-hover);
  }
  .sf-button.sf-button--ghost.sf-button--primary:not(:disabled):not(.disabled):hover .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-primary-hover);
  }
  .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled):hover .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-primary-hover);
  }
  .sf-button.sf-button--link.sf-button--primary:not(:disabled):not(.disabled):hover .sf-icon {
    --sf-icon--color: var(--sf-primary-hover);
  }
  .sf-button.sf-button--ghost.sf-button--primary:not(:disabled):not(.disabled):hover .sf-icon {
    --sf-icon--color: var(--sf-primary-hover);
  }
  .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled):hover .sf-icon {
    --sf-icon--color: var(--sf-primary-hover);
  }
  .sf-button.sf-button--link.sf-button--on-surface:not(:disabled):not(.disabled):hover .sf-icon {
    --sf-icon--color: var(--sf-on-surface-hover);
  }
  .sf-button.sf-button--ghost.sf-button--on-surface:not(:disabled):not(.disabled):hover .sf-icon {
    --sf-icon--color: var(--sf-on-surface-hover);
  }
  .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled):hover .sf-icon {
    --sf-icon--color: var(--sf-on-surface-hover);
  }
  .sf-button.sf-button--default.sf-button--primary:not(:disabled):not(.disabled):active, .sf-button.sf-button--default.sf-button--primary:not(:disabled):not(.disabled).active, .sf-button.sf-button--default.sf-button--secondary:not(:disabled):not(.disabled):active, .sf-button.sf-button--default.sf-button--secondary:not(:disabled):not(.disabled).active {
    --sf-button--background-color: var(--sf-primary-active);
  }
  .sf-button.sf-button--default.sf-button--on-surface:not(:disabled):not(.disabled):active, .sf-button.sf-button--default.sf-button--on-surface:not(:disabled):not(.disabled).active {
    --sf-button--background-color: var(--sf-on-surface-active);
  }
  .sf-button.sf-button--tonal.sf-button--secondary:not(:disabled):not(.disabled):active, .sf-button.sf-button--tonal.sf-button--secondary:not(:disabled):not(.disabled).active {
    --sf-button--background-color: var(--sf-secondary-container-active);
  }
  .sf-button.sf-button--tonal.sf-button--primary:not(:disabled):not(.disabled):active, .sf-button.sf-button--tonal.sf-button--primary:not(:disabled):not(.disabled).active {
    --sf-button--background-color: var(--sf-primary-container-active);
  }
  .sf-button.sf-button--link.sf-button--on-surface:not(:disabled):not(.disabled):active {
    --sf-button--background-color: var(--sf-surface-container-active);
  }
  .sf-button.sf-button--ghost.sf-button--on-surface:not(:disabled):not(.disabled):active {
    --sf-button--background-color: var(--sf-surface-container-active);
  }
  .sf-button.sf-button--link.sf-button--on-surface.active:not(:disabled):not(.disabled) {
    --sf-button--background-color: var(--sf-surface-container-active);
  }
  .sf-button.sf-button--ghost.sf-button--on-surface.active:not(:disabled):not(.disabled) {
    --sf-button--background-color: var(--sf-surface-container-active);
  }
  .sf-button.sf-button--tonal.sf-button--on-surface:not(:disabled):not(.disabled):active, .sf-button.sf-button--tonal.sf-button--on-surface:not(:disabled):not(.disabled).active, .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled):active, .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled).active {
    --sf-button--background-color: var(--sf-surface-container-active);
  }
  .sf-button.sf-button--link.sf-button--on-surface:not(:disabled):not(.disabled):active .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-surface-active);
  }
  .sf-button.sf-button--ghost.sf-button--on-surface:not(:disabled):not(.disabled):active .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-surface-active);
  }
  .sf-button.sf-button--link.sf-button--on-surface.active:not(:disabled):not(.disabled) .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-surface-active);
  }
  .sf-button.sf-button--ghost.sf-button--on-surface.active:not(:disabled):not(.disabled) .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-surface-active);
  }
  .sf-button.sf-button--tonal.sf-button--on-surface:not(:disabled):not(.disabled):active .sf-button-text-container, .sf-button.sf-button--tonal.sf-button--on-surface:not(:disabled):not(.disabled).active .sf-button-text-container, .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled):active .sf-button-text-container, .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled).active .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-surface-active);
  }
  .sf-button.sf-button--link.sf-button--primary:not(:disabled):not(.disabled):active {
    --sf-button--background-color: var(--sf-primary-container-active);
  }
  .sf-button.sf-button--ghost.sf-button--primary:not(:disabled):not(.disabled):active {
    --sf-button--background-color: var(--sf-primary-container-active);
  }
  .sf-button.sf-button--link.sf-button--primary.active:not(:disabled):not(.disabled) {
    --sf-button--background-color: var(--sf-primary-container-active);
  }
  .sf-button.sf-button--ghost.sf-button--primary.active:not(:disabled):not(.disabled) {
    --sf-button--background-color: var(--sf-primary-container-active);
  }
  .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled):active, .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled).active {
    --sf-button--background-color: var(--sf-primary-container-active);
  }
  .sf-button.sf-button--link.sf-button--primary:not(:disabled):not(.disabled):active .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-primary-active);
  }
  .sf-button.sf-button--ghost.sf-button--primary:not(:disabled):not(.disabled):active .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-primary-active);
  }
  .sf-button.sf-button--link.sf-button--primary.active:not(:disabled):not(.disabled) .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-primary-active);
  }
  .sf-button.sf-button--ghost.sf-button--primary.active:not(:disabled):not(.disabled) .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-primary-active);
  }
  .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled):active .sf-button-text-container, .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled).active .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-primary-active);
  }
  .sf-button.sf-button--link.sf-button--primary:not(:disabled):not(.disabled):active .sf-icon {
    --sf-icon--color: var(--sf-primary-active);
  }
  .sf-button.sf-button--ghost.sf-button--primary:not(:disabled):not(.disabled):active .sf-icon {
    --sf-icon--color: var(--sf-primary-active);
  }
  .sf-button.sf-button--link.sf-button--primary.active:not(:disabled):not(.disabled) .sf-icon {
    --sf-icon--color: var(--sf-primary-active);
  }
  .sf-button.sf-button--ghost.sf-button--primary.active:not(:disabled):not(.disabled) .sf-icon {
    --sf-icon--color: var(--sf-primary-active);
  }
  .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled):active .sf-icon, .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled).active .sf-icon {
    --sf-icon--color: var(--sf-primary-active);
  }
  .sf-button.sf-button--link.sf-button--on-surface:not(:disabled):not(.disabled):active .sf-icon {
    --sf-icon--color: var(--sf-on-surface-active);
  }
  .sf-button.sf-button--ghost.sf-button--on-surface:not(:disabled):not(.disabled):active .sf-icon {
    --sf-icon--color: var(--sf-on-surface-active);
  }
  .sf-button.sf-button--link.sf-button--on-surface.active:not(:disabled):not(.disabled) .sf-icon {
    --sf-icon--color: var(--sf-on-surface-active);
  }
  .sf-button.sf-button--ghost.sf-button--on-surface.active:not(:disabled):not(.disabled) .sf-icon {
    --sf-icon--color: var(--sf-on-surface-active);
  }
  .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled):active .sf-icon, .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled).active .sf-icon {
    --sf-icon--color: var(--sf-on-surface-active);
  }
  /* The ring is an outline: it shares no property with the elevation shadow,
     so a focused raised button keeps its shadow, and the offset is a token
     rather than a faked spread. */
  .sf-button:not(:disabled):not(.disabled).focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
    /* A filled button gets a second, inner line in its own ink. The ring colour
       is chosen to read against the surface, and on a filled control the fill
       can sit one step away from it on the same ramp: in the dark theme the
       ring measured 1.31:1 against the primary fill, so the ring alone read as
       part of the button. The ink is the label's colour, which contrasts with
       that fill by construction; where a button has no fill worth separating
       from, the token stays transparent and nothing is drawn. */
    --sf-button--focus-inset: inset 0 0 0 var(--sf-focus--offset) var(--sf-button--focus-ink, transparent);
  }
  .sf-button:not(:disabled):not(.disabled):focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
    /* A filled button gets a second, inner line in its own ink. The ring colour
       is chosen to read against the surface, and on a filled control the fill
       can sit one step away from it on the same ramp: in the dark theme the
       ring measured 1.31:1 against the primary fill, so the ring alone read as
       part of the button. The ink is the label's colour, which contrasts with
       that fill by construction; where a button has no fill worth separating
       from, the token stays transparent and nothing is drawn. */
    --sf-button--focus-inset: inset 0 0 0 var(--sf-focus--offset) var(--sf-button--focus-ink, transparent);
  }
  .sf-button.sf-button--default.sf-button--primary {
    --sf-button--focus-ink: var(--sf-on-primary);
  }
  .sf-button.sf-button--default.sf-button--secondary {
    --sf-button--focus-ink: var(--sf-on-secondary);
  }
  .sf-button.sf-button--default.sf-button--on-surface {
    --sf-button--focus-ink: var(--sf-on-surface-inverse, var(--sf-surface-0));
  }
  @media (forced-colors: active) {
    .sf-button:not(:disabled):not(.disabled).focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
    }
    .sf-button:not(:disabled):not(.disabled):focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
    }
  }
  .sf-button.sf-button.sf-button:disabled .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
  /* The states of the two ramp appearances: the fill rises one step on hover and
     another when pressed, and surface raises its border alongside. */
  .sf-button.sf-button--surface:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-alpha-8);
  }
  .sf-button.sf-button--surface:not(:disabled):not(.disabled):hover {
    --sf-button--border-color: var(--sf-alpha-12);
  }
  .sf-button.sf-button--surface:not(:disabled):not(.disabled):active {
    --sf-button--background-color: var(--sf-alpha-12);
  }
  .sf-button.sf-button--surface.active:not(:disabled):not(.disabled) {
    --sf-button--background-color: var(--sf-alpha-12);
  }
  .sf-button.sf-button--surface:not(:disabled):not(.disabled):active {
    --sf-button--border-color: var(--sf-alpha-16);
  }
  .sf-button.sf-button--surface.active:not(:disabled):not(.disabled) {
    --sf-button--border-color: var(--sf-alpha-16);
  }
  .sf-button.sf-button--surface:disabled,
  .sf-button.sf-button--surface.disabled {
    --sf-button--background-color: transparent;
    --sf-button--border-color: var(--sf-alpha-4);
  }
  .sf-button.sf-button--surface:disabled .sf-button-text-container,
  .sf-button.sf-button--surface.disabled .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-disable);
  }
  .sf-button.sf-button--surface:disabled .sf-icon,
  .sf-button.sf-button--surface.disabled .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
}
/* The destructive scheme. Every role it paints with is the error family's twin
   of the primary one -- fill, text, hover, active, disabled and the focus ink --
   so a destructive control behaves exactly like a primary one and only its
   colour says what it does. Added because the Framework had error roles and no
   way for a control to use them: a product that wanted a red delete had to
   reach past the component and set its colour by hand, and the next one would
   have done it again. The outline's border stays the neutral control outline,
   as it does for every other scheme. */
@layer sf.components {
  .sf-button.sf-button--default.sf-button--error {
    --sf-button--background-color: var(--sf-button-background-color, var(--sf-error));
  }
  .sf-button.sf-button--size-1.sf-button--link.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1);
    --sf-button-text-container--line-height: var(--sf-text-height-1);
  }
  .sf-button.sf-button--size-1.sf-button--ghost.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1);
    --sf-button-text-container--line-height: var(--sf-text-height-1);
  }
  .sf-button.sf-button--size-1.sf-button--default.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-1.sf-button--tonal.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-1.sf-button--outline.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1);
    --sf-button-text-container--line-height: var(--sf-text-height-1);
  }
  .sf-button.sf-button--size-1.sf-button--link.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1.sf-button--ghost.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-2.sf-button--link.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-2.sf-button--ghost.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-3.sf-button--link.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-3.sf-button--ghost.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1\/2.sf-button--link.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1\/2.sf-button--ghost.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1\/3.sf-button--link.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1\/3.sf-button--ghost.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--size-1.sf-button--default.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-1.sf-button--tonal.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-1.sf-button--outline.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-2.sf-button--default.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-2.sf-button--tonal.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-2.sf-button--outline.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-3.sf-button--default.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-3.sf-button--tonal.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-3.sf-button--outline.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-1\/2.sf-button--default.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-1\/2.sf-button--tonal.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-1\/2.sf-button--outline.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-1\/3.sf-button--default.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-1\/3.sf-button--tonal.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-1\/3.sf-button--outline.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--default.sf-button--error .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-on-error));
  }
  .sf-button.sf-button--default.sf-button--error .sf-icon {
    --sf-icon--color: var(--sf-on-error);
  }
  .sf-button.sf-button--tonal.sf-button--error {
    --sf-button--background-color: var(--sf-button-background-color, var(--sf-error-container));
  }
  .sf-button.sf-button--tonal.sf-button--error .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-on-error-container));
  }
  .sf-button.sf-button--tonal.sf-button--error .sf-icon {
    --sf-icon--color: var(--sf-on-error-container);
  }
  .sf-button.sf-button--outline.sf-button--error {
    --sf-button--background-color: var(--sf-button-background-color, transparent);
    --sf-button--border-color: var(--sf-button-border-color, var(--sf-outline));
  }
  .sf-button.sf-button--link.sf-button--error .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-error));
  }
  .sf-button.sf-button--ghost.sf-button--error .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-error));
  }
  .sf-button.sf-button--outline.sf-button--error .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-error));
  }
  .sf-button.sf-button--link.sf-button--error .sf-icon {
    --sf-icon--color: var(--sf-error);
  }
  .sf-button.sf-button--ghost.sf-button--error .sf-icon {
    --sf-icon--color: var(--sf-error);
  }
  .sf-button.sf-button--outline.sf-button--error .sf-icon {
    --sf-icon--color: var(--sf-error);
  }
  .sf-button.sf-button--link.sf-button--error {
    --sf-button--background-color: var(--sf-button-background-color, transparent);
  }
  .sf-button.sf-button--ghost.sf-button--error {
    --sf-button--background-color: var(--sf-button-background-color, transparent);
  }
  .sf-button.sf-button--loading.sf-button--default.sf-button--error {
    --sf-button--background-color: var(--sf-button-background-color, transparent);
  }
  .sf-button.sf-button--size-2.sf-button--link.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-2);
    --sf-button-text-container--line-height: var(--sf-text-height-2);
  }
  .sf-button.sf-button--size-2.sf-button--ghost.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-2);
    --sf-button-text-container--line-height: var(--sf-text-height-2);
  }
  .sf-button.sf-button--size-2.sf-button--default.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-2.sf-button--tonal.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-2.sf-button--outline.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-2);
    --sf-button-text-container--line-height: var(--sf-text-height-2);
  }
  .sf-button.sf-button--size-3.sf-button--link.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-3);
    --sf-button-text-container--line-height: var(--sf-text-height-3);
  }
  .sf-button.sf-button--size-3.sf-button--ghost.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-3);
    --sf-button-text-container--line-height: var(--sf-text-height-3);
  }
  .sf-button.sf-button--size-3.sf-button--default.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-3.sf-button--tonal.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-3.sf-button--outline.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-3);
    --sf-button-text-container--line-height: var(--sf-text-height-3);
  }
  .sf-button.sf-button--size-1\/2.sf-button--link.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/2);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-button.sf-button--size-1\/2.sf-button--ghost.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/2);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-button.sf-button--size-1\/2.sf-button--default.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-1\/2.sf-button--tonal.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-1\/2.sf-button--outline.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/2);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-button.sf-button--size-1\/3.sf-button--link.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/3);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/3);
  }
  .sf-button.sf-button--size-1\/3.sf-button--ghost.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/3);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/3);
  }
  .sf-button.sf-button--size-1\/3.sf-button--default.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-1\/3.sf-button--tonal.sf-button--error .sf-button-text-container,
  .sf-button.sf-button--size-1\/3.sf-button--outline.sf-button--error .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/3);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/3);
  }
}
@layer sf.states {
  .sf-button.sf-button--link.sf-button--error.focus-visible:not(:disabled):not(.disabled) {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--ghost.sf-button--error.focus-visible:not(:disabled):not(.disabled) {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--outline.sf-button--error:not(:disabled):not(.disabled).focus-visible {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--link.sf-button--error:not(:disabled):not(.disabled).focus-visible {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--link.sf-button--error:not(:disabled):not(.disabled):focus-visible {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--ghost.sf-button--error:not(:disabled):not(.disabled).focus-visible {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--ghost.sf-button--error:not(:disabled):not(.disabled):focus-visible {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--outline.sf-button--error:not(:disabled):not(.disabled).focus-visible {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--outline.sf-button--error:not(:disabled):not(.disabled):focus-visible {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--default.sf-button--error:disabled,
  .sf-button.sf-button--tonal.sf-button--error:disabled {
    --sf-button--background-color: var(--sf-disable);
  }
  .sf-button.sf-button--link.sf-button--error:disabled .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-disable);
  }
  .sf-button.sf-button--ghost.sf-button--error:disabled .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-disable);
  }
  .sf-button.sf-button--default.sf-button--error:disabled .sf-button-text-container,
  .sf-button.sf-button--tonal.sf-button--error:disabled .sf-button-text-container,
  .sf-button.sf-button--outline.sf-button--error:disabled .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-disable);
  }
  .sf-button.sf-button--outline.sf-button--error:disabled {
    --sf-button--border-color: var(--sf-outline-disable);
  }
  .sf-button.sf-button--default.sf-button--error:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-error-hover);
  }
  .sf-button.sf-button--tonal.sf-button--error:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-error-container-hover);
  }
  .sf-button.sf-button--link.sf-button--error:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-error-container-hover);
  }
  .sf-button.sf-button--ghost.sf-button--error:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-error-container-hover);
  }
  .sf-button.sf-button--outline.sf-button--error:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-error-container-hover);
  }
  .sf-button.sf-button--link.sf-button--error:not(:disabled):not(.disabled):hover .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-error-hover);
  }
  .sf-button.sf-button--ghost.sf-button--error:not(:disabled):not(.disabled):hover .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-error-hover);
  }
  .sf-button.sf-button--outline.sf-button--error:not(:disabled):not(.disabled):hover .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-error-hover);
  }
  .sf-button.sf-button--link.sf-button--error:not(:disabled):not(.disabled):hover .sf-icon {
    --sf-icon--color: var(--sf-error-hover);
  }
  .sf-button.sf-button--ghost.sf-button--error:not(:disabled):not(.disabled):hover .sf-icon {
    --sf-icon--color: var(--sf-error-hover);
  }
  .sf-button.sf-button--outline.sf-button--error:not(:disabled):not(.disabled):hover .sf-icon {
    --sf-icon--color: var(--sf-error-hover);
  }
  .sf-button.sf-button--default.sf-button--error:not(:disabled):not(.disabled):active,
  .sf-button.sf-button--default.sf-button--error:not(:disabled):not(.disabled).active {
    --sf-button--background-color: var(--sf-error-active);
  }
  .sf-button.sf-button--tonal.sf-button--error:not(:disabled):not(.disabled):active,
  .sf-button.sf-button--tonal.sf-button--error:not(:disabled):not(.disabled).active {
    --sf-button--background-color: var(--sf-error-container-active);
  }
  .sf-button.sf-button--link.sf-button--error:not(:disabled):not(.disabled):active {
    --sf-button--background-color: var(--sf-error-container-active);
  }
  .sf-button.sf-button--ghost.sf-button--error:not(:disabled):not(.disabled):active {
    --sf-button--background-color: var(--sf-error-container-active);
  }
  .sf-button.sf-button--link.sf-button--error.active:not(:disabled):not(.disabled) {
    --sf-button--background-color: var(--sf-error-container-active);
  }
  .sf-button.sf-button--ghost.sf-button--error.active:not(:disabled):not(.disabled) {
    --sf-button--background-color: var(--sf-error-container-active);
  }
  .sf-button.sf-button--outline.sf-button--error:not(:disabled):not(.disabled):active,
  .sf-button.sf-button--outline.sf-button--error:not(:disabled):not(.disabled).active {
    --sf-button--background-color: var(--sf-error-container-active);
  }
  .sf-button.sf-button--link.sf-button--error:not(:disabled):not(.disabled):active .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-error-active);
  }
  .sf-button.sf-button--ghost.sf-button--error:not(:disabled):not(.disabled):active .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-error-active);
  }
  .sf-button.sf-button--link.sf-button--error.active:not(:disabled):not(.disabled) .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-error-active);
  }
  .sf-button.sf-button--ghost.sf-button--error.active:not(:disabled):not(.disabled) .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-error-active);
  }
  .sf-button.sf-button--outline.sf-button--error:not(:disabled):not(.disabled):active .sf-button-text-container,
  .sf-button.sf-button--outline.sf-button--error:not(:disabled):not(.disabled).active .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-error-active);
  }
  .sf-button.sf-button--link.sf-button--error:not(:disabled):not(.disabled):active .sf-icon {
    --sf-icon--color: var(--sf-error-active);
  }
  .sf-button.sf-button--ghost.sf-button--error:not(:disabled):not(.disabled):active .sf-icon {
    --sf-icon--color: var(--sf-error-active);
  }
  .sf-button.sf-button--link.sf-button--error.active:not(:disabled):not(.disabled) .sf-icon {
    --sf-icon--color: var(--sf-error-active);
  }
  .sf-button.sf-button--ghost.sf-button--error.active:not(:disabled):not(.disabled) .sf-icon {
    --sf-icon--color: var(--sf-error-active);
  }
  .sf-button.sf-button--outline.sf-button--error:not(:disabled):not(.disabled):active .sf-icon,
  .sf-button.sf-button--outline.sf-button--error:not(:disabled):not(.disabled).active .sf-icon {
    --sf-icon--color: var(--sf-error-active);
  }
  .sf-button.sf-button--default.sf-button--error {
    --sf-button--focus-ink: var(--sf-on-error);
  }
}
@layer sf.components {
  .sf-button,
  .sf-icon-button {
    transition-duration: var(--sf-duration-fast);
    transition-property: background-color, border-color, box-shadow, color;
    transition-timing-function: var(--sf-animation);
  }
  .sf-button {
    /* A loading button is also a disabled one -- native disabled is what stops a
       second click -- so every emphasis wears the same disabled look while it
       works. The stripes therefore carry no colour of their own: one step of the
       neutral alpha ramp over transparent, which sits on the grey disabled fill,
       on a transparent link or outline, and in either theme without shouting
       over the label. */
    --sf-button-loading-stripe: var(--sf-alpha-8);
    /* sf-button-state-loading is the documented state class; the generic
       `loading` beside it is kept for existing markup. */
  }
  .sf-button > * {
    position: relative;
    z-index: 1;
  }
  .sf-button.loading, .sf-button.sf-button-state-loading {
    pointer-events: none;
    position: relative;
    overflow: hidden;
  }
  .sf-button.loading::after, .sf-button.sf-button-state-loading::after {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    inset: -50%;
    background-image: repeating-linear-gradient(135deg, var(--sf-button-loading-stripe) 0, var(--sf-button-loading-stripe) var(--sf-space-1\/2), transparent var(--sf-space-1\/2), transparent var(--sf-space-1));
    -webkit-animation: sf-button-stripes-slide calc(var(--sf-duration-slow) * 2) linear infinite;
            animation: sf-button-stripes-slide calc(var(--sf-duration-slow) * 2) linear infinite;
    will-change: transform;
    pointer-events: none;
  }
  /* The stripes repeat every --sf-space-1 across their own axis, at 135deg. Along
     the x axis that period is longer by the square root of two, so one loop has
     to travel exactly that far; travelling --sf-space-1 made the pattern jump
     back at the end of every cycle. */
  @-webkit-keyframes sf-button-stripes-slide {
    from {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(calc(var(--sf-space-1) * 1.41421356));
              transform: translateX(calc(var(--sf-space-1) * 1.41421356));
    }
  }
  @keyframes sf-button-stripes-slide {
    from {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(calc(var(--sf-space-1) * 1.41421356));
              transform: translateX(calc(var(--sf-space-1) * 1.41421356));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-button,
    .sf-icon-button {
      transition-duration: 0s;
    }
    .sf-button.loading::after,
    .sf-button.sf-button-state-loading::after {
      -webkit-animation: none;
              animation: none;
    }
  }
}
@layer sf.override {
  /* An outline segment and its link siblings form one closed control. The
     link variant previously kept only a translucent join, leaving its outer
     top, bottom and end edges transparent. Draw the group perimeter once and
     let the selected outline segment own both of its joins. */
  .sf-button.sf-button--link[class*=segment-] {
    /* The same perimeter the group draws, in the same role: on --sf-outline
       the link segments of a group were a heavier line than its outline
       segments, inside one control. */
    border-color: var(--sf-outline);
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
  }
  .sf-button.sf-button--link.segment-start,
  .sf-button.sf-button--link.segment-middle {
    --sf-button--border-inline-start-width: var(--sf-px);
    --sf-button--border-inline-end-width: 0;
  }
  .sf-button.sf-button--link.segment-end {
    --sf-button--border-inline-start-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
  }
  sf-button[\:has\(.sf-button--outline\[class*\%3Dsegment-\]\)] + sf-icon-button .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-button.sf-button--outline[class*=segment-] + .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline) {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-button:has(.sf-button--outline[class*=segment-]) + sf-icon-button .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-button.sf-button--outline[class*=segment-] + .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline) {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-button[\:has\(.sf-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button[class*=segment-]:not(.sf-button--outline),
  .sf-button.sf-button--outline[class*=segment-] + .sf-button[class*=segment-]:not(.sf-button--outline) {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  sf-button:has(.sf-button--outline[class*=segment-]) + sf-button .sf-button[class*=segment-]:not(.sf-button--outline),
  .sf-button.sf-button--outline[class*=segment-] + .sf-button[class*=segment-]:not(.sf-button--outline) {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  sf-button[\:has\(\%2B\%20sf-icon-button\%20.sf-icon-button--outline\[class*\%3Dsegment-\]\)] .sf-button[class*=segment-]:not(.sf-button--outline),
  .sf-button[class*=segment-]:not(.sf-button--outline) [\:has\(\%2B\%20.sf-icon-button.sf-icon-button--outline\[class*\%3Dsegment-\]\)] {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  sf-button:has(+ sf-icon-button .sf-icon-button--outline[class*=segment-]) .sf-button[class*=segment-]:not(.sf-button--outline),
  .sf-button[class*=segment-]:not(.sf-button--outline) :has(+ .sf-icon-button.sf-icon-button--outline[class*=segment-]) {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  sf-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-button[class*=segment-]:not(.sf-button--outline),
  .sf-button[class*=segment-]:not(.sf-button--outline)[\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)] {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  sf-button:has(+ sf-button .sf-button--outline[class*=segment-]) .sf-button[class*=segment-]:not(.sf-button--outline),
  .sf-button[class*=segment-]:not(.sf-button--outline):has(+ .sf-button.sf-button--outline[class*=segment-]) {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  /* Keep this after the compatibility rules above: the selected segment's
     end border is the only line at this join. */
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-left-width: 0;
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-left-width: 0;
    }
  }
  sf-button[\:has\(.sf-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)),
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)) {
    border-left-width: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-right-width: 0;
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-right-width: 0;
    }
  }
  sf-button[\:has\(.sf-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)),
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)) {
    border-right-width: 0;
  }
  sf-button[\:has\(.sf-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button.sf-button--link[class*=segment-],
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    --sf-button--border-inline-start-width: 0;
    border-inline-start-width: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-left-width: 0;
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-left-width: 0;
    }
  }
  sf-button[\:has\(.sf-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)),
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)) {
    border-left-width: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-button:has(.sf-button--outline[class*=segment-]) + sf-button .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-left-width: 0;
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) sf-button:has(.sf-button--outline[class*=segment-]) + sf-button .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-left-width: 0;
    }
  }
  sf-button:has(.sf-button--outline[class*=segment-]) + sf-button .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)),
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)) {
    border-left-width: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-right-width: 0;
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-right-width: 0;
    }
  }
  sf-button[\:has\(.sf-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)),
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)) {
    border-right-width: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-button:has(.sf-button--outline[class*=segment-]) + sf-button .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-right-width: 0;
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] sf-button:has(.sf-button--outline[class*=segment-]) + sf-button .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-right-width: 0;
    }
  }
  sf-button:has(.sf-button--outline[class*=segment-]) + sf-button .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)),
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)) {
    border-right-width: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-left-width: 0;
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-left-width: 0;
    }
  }
  sf-button[\:has\(.sf-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)),
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)) {
    border-left-width: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-right-width: 0;
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-right-width: 0;
    }
  }
  sf-button[\:has\(.sf-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)),
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)) {
    border-right-width: 0;
  }
  sf-button[\:has\(.sf-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button.sf-button--link[class*=segment-],
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    --sf-button--border-inline-start-width: 0;
    border-inline-start-width: 0;
  }
  sf-button:has(.sf-button--outline[class*=segment-]) + sf-button .sf-button.sf-button--link[class*=segment-],
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    --sf-button--border-inline-start-width: 0;
    border-inline-start-width: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-right-width: 0;
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-right-width: 0;
    }
  }
  sf-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)),
  .sf-button.sf-button--link[class*=segment-][\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)]:where(:dir(ltr)) {
    border-right-width: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-left-width: 0;
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-left-width: 0;
    }
  }
  sf-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)),
  .sf-button.sf-button--link[class*=segment-][\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)]:where(:dir(rtl)) {
    border-left-width: 0;
  }
  sf-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-button.sf-button--link[class*=segment-],
  .sf-button.sf-button--link[class*=segment-][\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)] {
    --sf-button--border-inline-end-width: 0;
    border-inline-end-width: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-right-width: 0;
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-right-width: 0;
    }
  }
  sf-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)),
  .sf-button.sf-button--link[class*=segment-][\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)]:where(:dir(ltr)) {
    border-right-width: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-button:has(+ sf-button .sf-button--outline[class*=segment-]) .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--link[class*=segment-]:has(+ .sf-button.sf-button--outline[class*=segment-]) {
    border-right-width: 0;
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) sf-button:has(+ sf-button .sf-button--outline[class*=segment-]) .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--link[class*=segment-]:has(+ .sf-button.sf-button--outline[class*=segment-]) {
    border-right-width: 0;
    }
  }
  sf-button:has(+ sf-button .sf-button--outline[class*=segment-]) .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)),
  .sf-button.sf-button--link[class*=segment-]:has(+ .sf-button.sf-button--outline[class*=segment-]):where(:dir(ltr)) {
    border-right-width: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-left-width: 0;
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-left-width: 0;
    }
  }
  sf-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)),
  .sf-button.sf-button--link[class*=segment-][\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)]:where(:dir(rtl)) {
    border-left-width: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-button:has(+ sf-button .sf-button--outline[class*=segment-]) .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--link[class*=segment-]:has(+ .sf-button.sf-button--outline[class*=segment-]) {
    border-left-width: 0;
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] sf-button:has(+ sf-button .sf-button--outline[class*=segment-]) .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--link[class*=segment-]:has(+ .sf-button.sf-button--outline[class*=segment-]) {
    border-left-width: 0;
    }
  }
  sf-button:has(+ sf-button .sf-button--outline[class*=segment-]) .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)),
  .sf-button.sf-button--link[class*=segment-]:has(+ .sf-button.sf-button--outline[class*=segment-]):where(:dir(rtl)) {
    border-left-width: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-right-width: 0;
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-right-width: 0;
    }
  }
  sf-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)),
  .sf-button.sf-button--link[class*=segment-][\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)]:where(:dir(ltr)) {
    border-right-width: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-left-width: 0;
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-left-width: 0;
    }
  }
  sf-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)),
  .sf-button.sf-button--link[class*=segment-][\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)]:where(:dir(rtl)) {
    border-left-width: 0;
  }
  sf-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-button.sf-button--link[class*=segment-],
  .sf-button.sf-button--link[class*=segment-][\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)] {
    --sf-button--border-inline-end-width: 0;
    border-inline-end-width: 0;
  }
  sf-button:has(+ sf-button .sf-button--outline[class*=segment-]) .sf-button.sf-button--link[class*=segment-],
  .sf-button.sf-button--link[class*=segment-]:has(+ .sf-button.sf-button--outline[class*=segment-]) {
    --sf-button--border-inline-end-width: 0;
    border-inline-end-width: 0;
  }
}