@layer components {
  .button {
    font-weight: normal;

    &[data-type="primary"], &[data-type="primary-light"], &[data-type="secondary"], &[data-type="secondary-white"], &[data-type="warning"] {
      &:where(:not([data-size])) {
        padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
      }

      &[data-size="small"] {
        padding: 0.75rem;
        border-radius: 0.75rem;
      }

      &[data-size="medium"] {
        padding: 1rem 2rem;
        font-size: 16px;
      }

      &[data-size="large"] {
        padding: 1.25rem 2rem;
        font-size: 18px;
      }
    }

    &[data-type="secondary"] {
      background-color: transparent;
      border-color: var(--color-brand-primary);
      color: var(--color-brand-primary);
    }

    &[data-type="secondary"]:hover {
      background-color: var(--color-button-secondary-hover);
      color: white;
    }

    &[data-type="secondary-white"]:hover {
      background-color: var(--color-white);
      color: var(--color-brand-primary);
    }
  }

  button:has(.cart-badge) > .icon--cart {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
}