@layer base {
  :host .dds-button {
    display: inline-flex;
    position: relative;
    justify-content: center;
    flex-shrink: 0;
    block-size: var(--dds-button-shared-block-size);
    min-inline-size: var(--dds-button-shared-block-size);
    user-select: none;
    background: var(--dds-button-background);
    color: contrast-color(var(--dds-button-background));
    border: none;
    vertical-align: middle;
    cursor: pointer;
    font: var(--dds-button-shared-type);
    border-radius: var(--dds-button-radius, var(--dds-button-shared-radius));
    transition: background-color 140ms;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      border: var(--dds-button-border-width, var(--dds-size-25))
        var(--dds-button-border-style, solid)
        var(--dds-button-border-background, transparent);
    }

    .dds-button__content {
      display: inline-flex;
      align-items: center;
    }

    .dds-button__content--label {
      padding-inline-start: var(
        --dds-button-padding-inline-start,
        var(--dds-button-shared-padding-inline)
      );
      padding-inline-end: var(
        --dds-button-padding-inline-end,
        var(--dds-button-shared-padding-inline)
      );
      gap: var(--dds-button-shared-gap);
    }

    .dds-button__content--label.dds-button__content--icon {
      --dds-button-padding-inline-start: var(--dds-size-150);
    }

    .dds-button__content--label.dds-button__content--disclosure {
      --dds-button-padding-inline-end: var(--dds-size-150);
    }

    .dds-button__spinner {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

@layer variants {
  :host([variant="primary"]) {
    --dds-button-background: var(--dds-button-background-primary-default);
    --dds-button-background-hover: var(--dds-button-background-primary-hover);
    --dds-button-background-pressed: var(
      --dds-button-background-primary-pressed
    );
    --dds-button-text: var(--dds-button-text-primary);
  }

  :host([variant="secondary"]),
  :host([variant="dashed"]) {
    --dds-button-background: var(--dds-button-background-secondary-default);
    --dds-button-background-hover: var(--dds-button-background-secondary-hover);
    --dds-button-background-pressed: var(
      --dds-button-background-secondary-pressed
    );
    --dds-button-text: var(--dds-button-text-secondary);
    --dds-button-border-background: var(--dds-button-border-secondary);
  }

  :host([variant="dashed"]) {
    --dds-button-border-style: dashed;
  }

  :host([variant="tertiary"]) {
    --dds-button-background-hover: var(--dds-button-background-secondary-hover);
    --dds-button-background-pressed: var(
      --dds-button-background-secondary-pressed
    );
    --dds-button-text: var(--dds-button-text-secondary);
  }
}

@layer states {
  :host .dds-button:hover {
    background: var(--dds-button-background-hover);
  }

  :host .dds-button:focus-visible {
    outline: var(--dds-button-shared-focus-outline-width) solid
      var(--dds-button-shared-focus-background);
    outline-offset: var(--dds-button-shared-focus-outline-offset);
  }

  :host .dds-button:active {
    background: var(--dds-button-background-pressed);
  }

  /* Loading */
  :host([loading]) {
    .dds-button {
      cursor: wait;
    }

    .dds-button__content {
      visibility: hidden;
    }
  }

  /* Disabled */
  :host([disabled]) {
    pointer-events: none;

    .dds-button {
      opacity: var(--dds-button-shared-disabled-opacity);
    }
  }
}

@layer rounded {
  :host([rounded]) {
    --dds-button-radius: var(--dds-radius-full);

    .dds-button__content--label {
      --dds-button-padding-inline-start: var(--dds-size-300);
      --dds-button-padding-inline-end: var(--dds-size-300);
    }

    .dds-button__content--label.dds-button__content--icon {
      --dds-button-padding-inline-start: var(--dds-size-250);
    }
  }
}

@layer group {
  :host(.dds-button-group__button--first) {
    .dds-button {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
  }

  :host(.dds-button-group__button--inner) {
    .dds-button {
      border-radius: 0;
    }
  }

  :host(.dds-button-group__button--inner),
  :host(.dds-button-group__button--last) {
    .dds-button {
      margin-inline-start: -1px;
    }
  }

  :host(.dds-button-group__button--last) {
    .dds-button {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }
  }
}
