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

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

.rt-IconButton {
  &:where(:not(.rt-variant-ghost)) {
    height: var(--base-button-height);
    width: var(--base-button-height);
  }
  &:where(.rt-variant-ghost) {
    padding: var(--icon-button-ghost-padding);

    /* 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(--icon-button-ghost-padding));
    --margin-right-override: calc(var(--margin-right) - var(--icon-button-ghost-padding));
    --margin-bottom-override: calc(var(--margin-bottom) - var(--icon-button-ghost-padding));
    --margin-left-override: calc(var(--margin-left) - var(--icon-button-ghost-padding));

    /* 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-IconButton:where(.rt-variant-ghost) {
    &:where(.rt-r-size-1) {
      --icon-button-ghost-padding: var(--space-1);
    }
    &:where(.rt-r-size-2) {
      --icon-button-ghost-padding: calc(var(--space-1) * 1.5);
    }
    &:where(.rt-r-size-3) {
      --icon-button-ghost-padding: var(--space-2);
    }
    &:where(.rt-r-size-4) {
      --icon-button-ghost-padding: var(--space-3);
    }
  }
}