@layer vitamin-play {
  .vp-button {
    --button-text-case: var(
      --vp-semantic-typography-screen-s-button-label-m-text-case
    );
    --button-text-decoration: var(
      --vp-semantic-typography-screen-s-button-label-m-text-decoration
    );
    --button-letter-spacing: var(
      --vp-semantic-typography-screen-s-button-label-m-letter-spacing
    );
    --button-font-size: var(
      --vp-semantic-typography-screen-s-button-label-m-font-size
    );
    --button-line-height: var(
      --vp-semantic-typography-screen-s-button-label-m-line-height
    );
    --button-font-weight: var(
      --vp-semantic-typography-screen-s-button-label-m-font-weight
    );
    --button-font-family: var(
      --vp-semantic-typography-screen-s-button-label-m-font-family
    );
    --button-font-optical-sizing: var(
      --vp-semantic-typography-screen-s-button-label-m-optical-sizing
    );
    --button-webkit-font-smoothing: var(
      --vp-semantic-typography-screen-s-button-label-m-webkit-font-smoothing
    );
  }
  .vp-button--small {
    --button-text-case: var(
      --vp-semantic-typography-screen-s-button-label-s-text-case
    );
    --button-text-decoration: var(
      --vp-semantic-typography-screen-s-button-label-s-text-decoration
    );
    --button-letter-spacing: var(
      --vp-semantic-typography-screen-s-button-label-s-letter-spacing
    );
    --button-font-size: var(
      --vp-semantic-typography-screen-s-button-label-s-font-size
    );
    --button-line-height: var(
      --vp-semantic-typography-screen-s-button-label-s-line-height
    );
    --button-font-weight: var(
      --vp-semantic-typography-screen-s-button-label-s-font-weight
    );
    --button-font-family: var(
      --vp-semantic-typography-screen-s-button-label-s-font-family
    );
    --button-font-optical-sizing: var(
      --vp-semantic-typography-screen-s-button-label-s-optical-sizing
    );
    --button-webkit-font-smoothing: var(
      --vp-semantic-typography-screen-s-button-label-s-webkit-font-smoothing
    );
  }
  .vp-button--large {
    --button-text-case: var(
      --vp-semantic-typography-screen-s-button-label-m-text-case
    );
    --button-text-decoration: var(
      --vp-semantic-typography-screen-s-button-label-m-text-decoration
    );
    --button-letter-spacing: var(
      --vp-semantic-typography-screen-s-button-label-m-letter-spacing
    );
    --button-font-size: var(
      --vp-semantic-typography-screen-s-button-label-m-font-size
    );
    --button-line-height: var(
      --vp-semantic-typography-screen-s-button-label-m-line-height
    );
    --button-font-weight: var(
      --vp-semantic-typography-screen-s-button-label-m-font-weight
    );
    --button-font-family: var(
      --vp-semantic-typography-screen-s-button-label-m-font-family
    );
    --button-font-optical-sizing: var(
      --vp-semantic-typography-screen-s-button-label-m-optical-sizing
    );
    --button-webkit-font-smoothing: var(
      --vp-semantic-typography-screen-s-button-label-m-webkit-font-smoothing
    );
  }
  .vp-button {
    --button-border-color: transparent;
    --button-color: var(--vp-semantic-color-content-on-brand-neutral);
    --button-background-color: var(--vp-semantic-color-container-brand);
    --button-background-color-hover: var(
      --vp-semantic-color-hover-container-brand
    );
    --button-background-color-active: var(
      --vp-semantic-color-active-container-brand
    );
  }
  .vp-button--inverse {
    --button-border-color: transparent;
    --button-color: var(--vp-semantic-color-content-brand);
    --button-background-color: var(--vp-semantic-color-container-neutral);
    --button-background-color-hover: var(
      --vp-semantic-color-hover-container-neutral
    );
    --button-background-color-active: var(
      --vp-semantic-color-active-container-neutral
    );
  }
  .vp-button--secondary {
    --button-border-color: var(--vp-semantic-color-border-neutral);
    --button-color: var(--vp-semantic-color-content-neutral);
    --button-background-color: var(--vp-semantic-color-container-neutral);
    --button-background-color-hover: var(
      --vp-semantic-color-hover-container-neutral
    );
    --button-background-color-active: var(
      --vp-semantic-color-active-container-neutral
    );
  }
  .vp-button--secondary.vp-button--inverse {
    --button-border-color: var(--vp-semantic-color-border-on-brand);
    --button-color: var(--vp-semantic-color-content-on-brand-neutral);
    --button-background-color: var(--vp-semantic-color-container-on-brand);
    --button-background-color-hover: color-mix(
      in srgb,
      var(--vp-semantic-color-container-on-brand) 80%,
      var(--vp-semantic-color-container-neutral)
    );
    --button-background-color-active: color-mix(
      in srgb,
      var(--vp-semantic-color-container-on-brand) 60%,
      var(--vp-semantic-color-container-neutral)
    );
  }
  .vp-button--tertiary {
    --button-border-color: transparent;
    --button-color: var(--vp-semantic-color-content-brand);
    --button-background-color: transparent;
    --button-background-color-hover: var(
      --vp-semantic-color-hover-container-neutral
    );
    --button-background-color-active: var(
      --vp-semantic-color-active-container-neutral
    );
  }
  .vp-button--tertiary.vp-button--inverse {
    --button-border-color: transparent;
    --button-color: var(--vp-semantic-color-content-on-brand-neutral);
    --button-background-color: var(--vp-semantic-color-container-on-brand);
    --button-background-color-hover: color-mix(
      in srgb,
      var(--vp-semantic-color-container-on-brand) 80%,
      var(--vp-semantic-color-container-neutral)
    );
    --button-background-color-active: color-mix(
      in srgb,
      var(--vp-semantic-color-container-on-brand) 60%,
      var(--vp-semantic-color-container-neutral)
    );
  }
  .vp-button--negative {
    --button-border-color: transparent;
    --button-color: var(--vp-semantic-color-content-inverse);
    --button-background-color: var(--vp-semantic-color-status-negative);
    --button-background-color-hover: var(
      --vp-semantic-color-hover-container-negative
    );
    --button-background-color-active: var(
      --vp-semantic-color-active-container-negative
    );
  }
  .vp-button--negative.vp-button--inverse {
    --button-border-color: transparent;
    --button-color: var(--vp-semantic-color-status-negative);
    --button-background-color: var(--vp-semantic-color-container-neutral);
    --button-background-color-hover: var(
      --vp-semantic-color-hover-container-neutral
    );
    --button-background-color-active: var(
      --vp-semantic-color-active-container-neutral
    );
  }
  .vp-button {
    --button-disabled-opacity: var(--vp-semantic-opacity-s);
    --button-border-width: var(--vp-semantic-border-width-s);
    --button-border-radius: var(--vp-semantic-border-radius-full)
      var(--vp-semantic-border-radius-full)
      var(--vp-semantic-border-radius-full)
      var(--vp-semantic-border-radius-full);
  }
  .vp-button--squared {
    --button-border-radius: var(--vp-semantic-border-radius-main)
      var(--vp-semantic-border-radius-main)
      var(--vp-semantic-border-radius-main)
      var(--vp-semantic-border-radius-main);
  }
  .vp-button {
    --button-spacing-gap: var(--vp-semantic-spacing-xs);
    --button-padding: var(--vp-semantic-spacing-s) var(--vp-semantic-spacing-l)
      var(--vp-semantic-spacing-s) var(--vp-semantic-spacing-l);
  }
  .vp-button--small {
    --button-spacing-gap: var(--vp-semantic-spacing-2xs);
    --button-padding: var(--vp-semantic-spacing-xs) var(--vp-semantic-spacing-m)
      var(--vp-semantic-spacing-xs) var(--vp-semantic-spacing-m);
  }
  .vp-button--large {
    --button-spacing-gap: var(--vp-semantic-spacing-xs);
    --button-padding: var(--vp-semantic-spacing-l)
      var(--vp-semantic-spacing-2xl) var(--vp-semantic-spacing-l)
      var(--vp-semantic-spacing-2xl);
  }
  .vp-button {
    --button-start-icon-width: var(--vp-semantic-sizing-l);
    --button-start-icon-height: var(--vp-semantic-sizing-l);
    --button-end-icon-width: var(--vp-semantic-sizing-l);
    --button-end-icon-height: var(--vp-semantic-sizing-l);
  }
  .vp-button--small {
    --button-start-icon-width: var(--vp-semantic-sizing-m);
    --button-start-icon-height: var(--vp-semantic-sizing-m);
    --button-end-icon-width: var(--vp-semantic-sizing-m);
    --button-end-icon-height: var(--vp-semantic-sizing-m);
  }
  .vp-button--large {
    --button-start-icon-width: var(--vp-semantic-sizing-xl);
    --button-start-icon-height: var(--vp-semantic-sizing-xl);
    --button-end-icon-width: var(--vp-semantic-sizing-xl);
    --button-end-icon-height: var(--vp-semantic-sizing-xl);
  }
  .vp-button {
    align-items: center;
    align-self: center;
    background-color: var(--button-background-color);
    border: var(--button-border-width) solid var(--button-border-color);
    border-radius: var(--button-border-radius);
    box-sizing: border-box;
    color: var(--button-color);
    display: inline-flex;
    flex-direction: row;
    font-family: var(--button-font-family);
    font-optical-sizing: var(--button-font-optical-sizing);
    font-weight: var(--button-font-weight);
    gap: var(--button-spacing-gap);
    justify-content: center;
    letter-spacing: var(--button-letter-spacing);
    line-height: var(--button-line-height);
    padding: var(--button-padding);
    position: relative;
    -webkit-text-decoration: var(--button-text-decoration);
    text-decoration: var(--button-text-decoration);
    text-transform: var(--button-text-case);
    transition: background-color var(--vp-semantic-motion-duration-quick)
      var(--vp-semantic-motion-easing-functional-ease-in-out);
    -webkit-font-smoothing: var(--button-webkit-font-smoothing);
    font-size: var(--button-font-size);
  }
  @media (prefers-reduced-motion: reduce) {
    .vp-button {
      transition-duration: 0s;
    }
  }
  .vp-button {
    appearance: none;
    cursor: pointer;
  }
  .vp-button:before {
    content: "";
    height: var(--vp-semantic-sizing-accessibility-touch-size);
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }
  .vp-button:hover:not(:disabled),
  .vp-button:hover:not([data-disabled]) {
    --button-background-color: var(--button-background-color-hover);
  }
  .vp-button:active:not(:disabled),
  .vp-button:active:not([data-disabled]) {
    --button-background-color: var(--button-background-color-active);
  }
  .vp-button:focus-visible:not(:disabled) {
    box-shadow: var(--vp-semantic-box-shadow-focus);
    outline: none;
  }
  .vp-button:disabled,
  .vp-button[data-disabled] {
    cursor: default;
    opacity: var(--button-disabled-opacity);
  }
  .vp-button[data-loading] {
    color: transparent;
  }
  .vp-button[data-loading] > :not([data-part="loading-slot"]) {
    visibility: hidden;
  }
  .vp-button [data-part="loading-slot"] {
    color: var(--button-color);
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .vp-button [data-part="loading-slot"],
  .vp-button [data-part="start-slot"] {
    align-items: center;
    display: flex;
    justify-content: center;
  }
  .vp-button [data-part="start-slot"] svg {
    flex: 0 0 auto;
    height: var(--button-start-icon-height);
    width: var(--button-start-icon-width);
  }
  .vp-button [data-part="end-slot"] {
    align-items: center;
    display: flex;
    justify-content: center;
  }
  .vp-button [data-part="end-slot"] svg {
    flex: 0 0 auto;
    height: var(--button-end-icon-height);
    width: var(--button-end-icon-width);
  }
  .vp-button [data-part="alt"] {
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    width: 1px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
  .vp-skeleton.vp-button-skeleton {
    --skeleton-border-offset: calc(var(--vp-semantic-border-width-s) * 2);
    --skeleton-height: calc(
      var(--vp-semantic-typography-screen-s-button-label-m-font-size) *
        var(--vp-semantic-typography-screen-s-button-label-m-line-height) +
        var(--vp-semantic-spacing-s) + var(--vp-semantic-spacing-s) +
        var(--skeleton-border-offset)
    );
  }
  .vp-skeleton.vp-button-skeleton--small {
    --skeleton-height: calc(
      var(--vp-semantic-typography-screen-s-button-label-s-font-size) *
        var(--vp-semantic-typography-screen-s-button-label-s-line-height) +
        var(--vp-semantic-spacing-xs) + var(--vp-semantic-spacing-xs) +
        var(--skeleton-border-offset)
    );
  }
  .vp-skeleton.vp-button-skeleton--large {
    --skeleton-height: calc(
      var(--vp-semantic-typography-screen-s-button-label-m-font-size) *
        var(--vp-semantic-typography-screen-s-button-label-m-line-height) +
        var(--vp-semantic-spacing-l) + var(--vp-semantic-spacing-l) +
        var(--skeleton-border-offset)
    );
  }
  .vp-loader {
    --loader-border-radius: var(--vp-semantic-border-radius-full);
    --loader-height: var(--vp-semantic-sizing-xl);
    --loader-width: var(--vp-semantic-sizing-xl);
  }
  .vp-loader--small {
    --loader-height: var(--vp-semantic-sizing-m);
    --loader-width: var(--vp-semantic-sizing-m);
  }
  .vp-loader--large {
    --loader-height: var(--vp-semantic-sizing-2xl);
    --loader-width: var(--vp-semantic-sizing-2xl);
  }
  .vp-loader--extra-large {
    --loader-height: var(--vp-semantic-sizing-4xl);
    --loader-width: var(--vp-semantic-sizing-4xl);
  }
  .vp-loader {
    --loader-conic-gradient-start: var(--vp-semantic-color-content-brand);
    --loader-conic-gradient-end: transparent;
  }
  .vp-loader--inverse {
    --loader-conic-gradient-start: var(
      --vp-semantic-color-content-on-brand-neutral
    );
    --loader-conic-gradient-end: transparent;
  }
  .vp-loader {
    --loader-timing-function: var(
      --vp-semantic-motion-easing-expressive-ease-in-out
    );
    --loader-duration: var(--vp-semantic-motion-duration-slow);
    display: inline-block;
    height: var(--loader-height);
    transform: skew(-20deg, -10deg) rotate(-40deg);
    width: var(--loader-width);
  }
  .vp-loader:before {
    animation: vp-loader infinite;
    animation-duration: var(--loader-duration);
    animation-timing-function: var(--loader-timing-function);
    border-radius: var(--loader-border-radius);
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
  }
}
@layer vitamin-play {
  @media (prefers-reduced-motion: reduce) {
    .vp-loader:before {
      animation: none;
    }
  }
  .vp-loader:before {
    background: conic-gradient(
      var(--loader-conic-gradient-start),
      var(--loader-conic-gradient-end) 85%
    );
    -webkit-mask: radial-gradient(farthest-side, #0000 80%, #000 0);
    mask: radial-gradient(farthest-side, #0000 80%, #000 0);
  }
  .vp-loader-alt {
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    width: 1px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
  @keyframes vp-loader {
    to {
      rotate: -1turn;
    }
  }
}