/* Button */

@layer components {
  .btn {
    font-family: var(--button-base-font-family, inherit);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--button-base-font-weight, 500);
    border-radius: var(--button-base-radius);
    transition: var(--button-base-transition);
    appearance: none;
    text-decoration: none;
    cursor: var(--button-base-cursor, pointer);
    border: var(--button-base-border, none);
    outline: var(--button-base-outline, none);
    opacity: 1;
  }
  .btn:focus {
    box-shadow: var(--button-base-focus-ring, 0 0 0 2px #e5e5ea);
    outline: var(
      --states-focus-outline,
      2px solid var(--color-primitive-neutral-200)
    );
    outline-offset: var(--states-focus-outline-offset, 2px);
  }
  .btn:disabled {
    opacity: var(--button-base-disabled-opacity, 0.5);
    cursor: not-allowed;
  }
  .btn:hover:not(:disabled) {
    opacity: var(--button-base-hover-opacity, 0.8);
  }

  /* Varianti */
  .btn-primary {
    background: var(--button-variant-contained-primary-bg, #363638);
    color: var(--button-variant-contained-primary-color, #fff);
  }
  .btn-primary:hover:not(:disabled) {
    background: var(--button-variant-contained-primary-hover-bg, #222224);
    color: var(--button-variant-contained-primary-hover-color, #fff);
  }
  .btn-primary:focus {
    box-shadow: var(
      --button-variant-contained-primary-focus-ring,
      0 0 0 2px var(--color-semantic-primary-light)
    );
    outline: var(
      --states-focus-outline,
      2px solid var(--color-primitive-neutral-200)
    );
    outline-offset: var(--states-focus-outline-offset, 2px);
  }

  .btn-secondary {
    background: var(--button-variant-contained-secondary-bg, #e5e5ea);
    color: var(--button-variant-contained-secondary-color, #363638);
  }
  .btn-secondary:hover:not(:disabled) {
    background: var(--button-variant-contained-secondary-hover-bg, #d1d1d6);
    color: var(--button-variant-contained-secondary-hover-color, #363638);
  }
  .btn-secondary:focus {
    box-shadow: var(
      --button-variant-contained-secondary-focus-ring,
      0 0 0 2px var(--color-semantic-secondary-light)
    );
    outline: var(
      --states-focus-outline,
      2px solid var(--color-primitive-neutral-200)
    );
    outline-offset: var(--states-focus-outline-offset, 2px);
  }

  .btn-danger {
    background: var(--button-variant-contained-danger-bg, #dc2626);
    color: var(--button-variant-contained-danger-color, #fff);
  }
  .btn-danger:hover:not(:disabled) {
    background: var(--button-variant-contained-danger-hover-bg, #b91c1c);
    color: var(--button-variant-contained-danger-hover-color, #fff);
  }
  .btn-danger:focus {
    box-shadow: var(
      --button-variant-contained-danger-focus-ring,
      0 0 0 2px #b91c1c
    );
    outline: var(
      --states-focus-error-outline,
      2px solid var(--color-primitive-red-100)
    );
    outline-offset: var(--states-focus-error-outline-offset, 2px);
  }

  .btn-ghost {
    background: var(--button-variant-ghost-bg, transparent);
    color: var(--button-variant-ghost-color, #363638);
  }
  .btn-ghost:hover:not(:disabled) {
    background: var(--button-variant-ghost-hover-bg, #f5f5f5);
    color: var(--button-variant-ghost-hover-color, #363638);
  }
  .btn-ghost:focus {
    box-shadow: var(
      --button-variant-ghost-focus-ring,
      0 0 0 2px var(--color-semantic-primary)
    );
    outline: var(
      --states-focus-outline,
      2px solid var(--color-primitive-neutral-200)
    );
    outline-offset: var(--states-focus-outline-offset, 2px);
  }

  .btn-outlined-primary {
    background: var(--button-variant-outlined-primary-bg, transparent);
    color: var(--button-variant-outlined-primary-color, #363638);
    border: var(--button-variant-outlined-primary-border, #363638);
  }
  .btn-outlined-primary:hover:not(:disabled) {
    background: var(--button-variant-outlined-primary-hover-bg, #363638);
    color: var(--button-variant-outlined-primary-hover-color, #fff);
  }
  .btn-outlined-primary:focus {
    box-shadow: var(
      --button-variant-outlined-primary-focus-ring,
      0 0 0 2px var(--color-semantic-primary)
    );
    outline: var(
      --states-focus-outline,
      2px solid var(--color-primitive-neutral-200)
    );
    outline-offset: var(--states-focus-outline-offset, 2px);
  }

  .btn-outlined-secondary {
    background: var(--button-variant-outlined-secondary-bg, transparent);
    color: var(--button-variant-outlined-secondary-color, #e5e5ea);
    border: var(--button-variant-outlined-secondary-border, #e5e5ea);
  }
  .btn-outlined-secondary:hover:not(:disabled) {
    background: var(--button-variant-outlined-secondary-hover-bg, #e5e5ea);
    color: var(--button-variant-outlined-secondary-hover-color, #fff);
  }
  .btn-outlined-secondary:focus {
    box-shadow: var(
      --button-variant-outlined-secondary-focus-ring,
      0 0 0 2px var(--color-semantic-secondary)
    );
    outline: var(
      --states-focus-outline,
      2px solid var(--color-primitive-neutral-200)
    );
    outline-offset: var(--states-focus-outline-offset, 2px);
  }

  .btn-outlined-danger {
    background: var(--button-variant-outlined-danger-bg, transparent);
    color: var(--button-variant-outlined-danger-color, #dc2626);
    border: var(--button-variant-outlined-danger-border, #dc2626);
  }
  .btn-outlined-danger:hover:not(:disabled) {
    background: var(--button-variant-outlined-danger-hover-bg, #dc2626);
    color: var(--button-variant-outlined-danger-hover-color, #fff);
  }
  .btn-outlined-danger:focus {
    box-shadow: var(
      --button-variant-outlined-danger-focus-ring,
      0 0 0 2px var(--color-primitive-red-600)
    );
    outline: var(
      --states-focus-error-outline,
      2px solid var(--color-primitive-red-100)
    );
    outline-offset: var(--states-focus-error-outline-offset, 2px);
  }

  .btn-dotted-primary {
    background: var(--button-variant-dotted-primary-bg, transparent);
    color: var(--button-variant-dotted-primary-color, #363638);
    border: var(--button-variant-dotted-primary-border, dotted #363638);
  }
  .btn-dotted-primary:hover:not(:disabled) {
    background: var(--button-variant-dotted-primary-hover-bg, #363638);
    color: var(--button-variant-dotted-primary-hover-color, #fff);
  }
  .btn-dotted-primary:focus {
    box-shadow: var(
      --button-variant-dotted-primary-focus-ring,
      0 0 0 2px var(--color-semantic-primary-light)
    );
    outline: var(
      --states-focus-outline,
      2px solid var(--color-primitive-neutral-200)
    );
    outline-offset: var(--states-focus-outline-offset, 2px);
  }

  .btn-dotted-secondary {
    background: var(--button-variant-dotted-secondary-bg, transparent);
    color: var(--button-variant-dotted-secondary-color, #e5e5ea);
    border: var(--button-variant-dotted-secondary-border, dotted #e5e5ea);
  }
  .btn-dotted-secondary:hover:not(:disabled) {
    background: var(--button-variant-dotted-secondary-hover-bg, #e5e5ea);
    color: var(--button-variant-dotted-secondary-hover-color, #fff);
  }
  .btn-dotted-secondary:focus {
    box-shadow: var(
      --button-variant-dotted-secondary-focus-ring,
      0 0 0 2px var(--color-semantic-secondary)
    );
    outline: var(
      --states-focus-outline,
      2px solid var(--color-primitive-neutral-200)
    );
    outline-offset: var(--states-focus-outline-offset, 2px);
  }

  /* icon button */

  .btn-icon-only {
    padding: var(--button-icon-padding, 0.5rem);
    background: var(--button-icon-bg, transparent);
    color: var(--button-icon-text, #363638);
    border-radius: var(--button-base-radius);
    cursor: pointer;
    transition: var(--button-base-transition);
  }
  .btn-icon-only:disabled,
  .btn-icon-only[aria-disabled='true'] {
    cursor: not-allowed;
    opacity: var(--button-disabled-opacity, 0.5);
  }

  .btn-icon-leading,
  .btn-icon-trailing {
    line-height: 0;
  }

  /* Size */
  .btn-sm {
    padding: var(--button-size-sm-padding, 0.375rem 0.625rem);
    font-size: var(--button-size-sm-font-size, 0.75rem);
    height: var(--button-size-sm-height, 2rem);
    line-height: var(--button-size-sm-line-height, 1.3);
  }
  .btn-md {
    padding: var(--button-size-md-padding, 0.75rem 1.5rem);
    font-size: var(--button-size-md-font-size, 1rem);
    height: var(--button-size-md-height, 2.5rem);
    line-height: var(--button-size-md-line-height, 1);
  }
  .btn-lg {
    padding: var(--button-size-lg-padding, 0.75rem 1.5rem);
    font-size: var(--button-size-lg-font-size, 1.125rem);
    height: var(--button-size-lg-height, 3rem);
    line-height: var(--button-size-lg-line-height, 1.5);
  }

  .btn-icon-sm {
    width: var(--button-icon-size-sm, 2rem);
    height: var(--button-icon-size-sm, 2rem);
    font-size: var(--button-icon-font-size-sm, 1rem);
  }

  .btn-icon-md {
    width: var(--button-icon-size-md, 2.5rem);
    height: var(--button-icon-size-md, 2.5rem);
    font-size: var(--button-icon-font-size-md, 1.25rem);
  }
  .btn-icon-lg {
    width: var(--button-icon-size-lg, 3rem);
    height: var(--button-icon-size-lg, 3rem);
    font-size: var(--button-icon-font-size-lg, 1.5rem);
  }
  .btn-icon-outlined {
    border: var(--button-icon-outlined-border, #e5e5ea);
    background: transparent;
    color: var(--button-icon-outlined-color, #363638);
    transition: var(--button-base-transition);
  }
  .btn-icon-outlined:hover:not(:disabled) {
    opacity: var(--button-hover-opacity, 0.8);
    background: var(--button-ghost-hover-bg, #f5f5f5);
    color: var(--button-outline-primary-hover-color, #fff);
  }
  .btn-icon-outlined:focus {
    box-shadow: var(--button-base-focus-ring, 0 0 0 2px #e5e5ea);
    outline: var(
      --states-focus-outline,
      2px solid var(--color-primitive-neutral-200)
    );
    outline-offset: var(--states-focus-outline-offset, 2px);
  }
  .btn-icon-ghost {
    background: transparent;
    color: var(--button-icon-ghost-color, #363638);
    transition: var(--button-base-transition);
  }
  .btn-icon-ghost:hover:not(:disabled) {
    background: var(--button-ghost-hover-bg, #f5f5f5);
    color: var(--button-ghost-hover-color, #363638);
  }
  .btn-icon-ghost:focus {
    box-shadow: var(
      --button-variant-ghost-focus-ring,
      0 0 0 2px var(--color-semantic-primary)
    );
    outline: var(
      --states-focus-outline,
      2px solid var(--color-primitive-neutral-200)
    );
    outline-offset: var(--states-focus-outline-offset, 2px);
  }
}