@import './_internal/base-button.css';

.rt-Button {
  &:where(:not(.rt-variant-ghost)) {
    /* stylelint-disable-next-line selector-max-type */
    & :where(svg) {
      opacity: 0.9;
    }
  }
}

/***************************************************************************************************
 *                                                                                                 *
 * SIZES                                                                                           *
 *                                                                                                 *
 ***************************************************************************************************/

.rt-Button {
  &:where(.rt-variant-ghost) {
    padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);

    /* We reset the defined margin variables to avoid inheriting them from a higher component */
    /* If a margin IS defined on the component itself, the utility class will win and reset it */
    --margin-top: 0px;
    --margin-right: 0px;
    --margin-bottom: 0px;
    --margin-left: 0px;

    /* Define the overrides to incorporate the negative margins */
    --margin-top-override: calc(var(--margin-top) - var(--button-ghost-padding-y));
    --margin-right-override: calc(var(--margin-right) - var(--button-ghost-padding-x));
    --margin-bottom-override: calc(var(--margin-bottom) - var(--button-ghost-padding-y));
    --margin-left-override: calc(var(--margin-left) - var(--button-ghost-padding-x));

    /* Reset the overrides on direct children */
    :where(&) > * {
      --margin-top-override: initial;
      --margin-right-override: initial;
      --margin-bottom-override: initial;
      --margin-left-override: initial;
    }

    margin: var(--margin-top-override) var(--margin-right-override) var(--margin-bottom-override)
      var(--margin-left-override);
  }
}

@breakpoints {
  .rt-Button {
    &:where(.rt-r-size-1) {
      gap: var(--space-1);
      font-size: var(--font-size-1);
      line-height: var(--line-height-1);
      letter-spacing: var(--letter-spacing-1);

      &:where(:not(.rt-variant-ghost)) {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
      }
      &:where(.rt-variant-ghost) {
        gap: var(--space-1);
        --button-ghost-padding-x: var(--space-2);
        --button-ghost-padding-y: var(--space-1);
      }
    }
    &:where(.rt-r-size-2) {
      gap: var(--space-2);
      font-size: var(--font-size-2);
      line-height: var(--line-height-2);
      letter-spacing: var(--letter-spacing-2);

      &:where(:not(.rt-variant-ghost)) {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
      }
      &:where(.rt-variant-ghost) {
        gap: var(--space-1);
        --button-ghost-padding-x: var(--space-2);
        --button-ghost-padding-y: var(--space-1);
      }
    }
    &:where(.rt-r-size-3) {
      gap: var(--space-3);
      font-size: var(--font-size-3);
      line-height: var(--line-height-3);
      letter-spacing: var(--letter-spacing-3);

      &:where(:not(.rt-variant-ghost)) {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
      }
      &:where(.rt-variant-ghost) {
        gap: var(--space-2);
        --button-ghost-padding-x: var(--space-3);
        --button-ghost-padding-y: calc(var(--space-1) * 1.5);
      }
    }
    &:where(.rt-r-size-4) {
      gap: var(--space-3);
      font-size: var(--font-size-4);
      line-height: var(--line-height-4);
      letter-spacing: var(--letter-spacing-4);

      &:where(:not(.rt-variant-ghost)) {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
      }
      &:where(.rt-variant-ghost) {
        gap: var(--space-2);
        --button-ghost-padding-x: var(--space-4);
        --button-ghost-padding-y: var(--space-2);
      }
    }
  }
}

/***************************************************************************************************
 *                                                                                                 *
 * VARIANTS                                                                                        *
 *                                                                                                 *
 ***************************************************************************************************/

.rt-Button:where(:not(.rt-variant-ghost)) {
  font-weight: var(--font-weight-medium);
}