// Component: Button

@use '00-config' as *;

$button-spacing: rem(gesso-spacing(1));

.c-button,
%c-button {
  @include button();
  margin-block-end: $button-spacing;

  & + & {
    margin-inline-start: $button-spacing;

    @supports selector(:has(*)) {
      margin-inline-start: 0;
    }
  }

  @supports selector(:has(*)) {
    &:has(+ #{&}) {
      margin-inline-end: $button-spacing;
    }
  }
}

// This button class is used for Drupal tabs.
.c-button--base {
  background-color: gesso-color(button, base, background);
  color: gesso-color(button, base, text);

  &:hover,
  &:focus {
    background-color: gesso-color(button, base, background-hover);
    color: gesso-color(button, base, text-hover);
  }

  &:active,
  &.is-active {
    background-color: gesso-color(button, base, background-active);
    color: gesso-color(button, base, text-active);
  }
}

// Drupal outputs this class on buttons that can delete content.
.c-button--danger {
  background-color: gesso-color(button, danger, background);
  color: gesso-color(button, danger, text);

  &:hover,
  &:focus {
    background-color: gesso-color(button, danger, background-hover);
    color: gesso-color(button, danger, text-hover);
  }

  &:active,
  &.is-active {
    background-color: gesso-color(button, danger, background-active);
    color: gesso-color(button, danger, text-active);
  }
}

// This custom button class, included as an example, is not output by Drupal by default.
.c-button--secondary {
  background-color: gesso-color(button, secondary, background);
  color: gesso-color(button, secondary, text);

  &:hover,
  &:focus {
    background-color: gesso-color(button, secondary, background-hover);
    color: gesso-color(button, secondary, text-hover);
  }

  &:active,
  &.is-active {
    background-color: gesso-color(button, secondary, background-active);
    color: gesso-color(button, secondary, text-active);
  }
}

// This custom button class, included as an example, is not output by Drupal by default.
.c-button--large {
  font-size: rem(gesso-font-size(5));
  padding: rem(gesso-spacing(2)) rem(gesso-spacing(5));
}

// This custom button class, included as an example, is not output by Drupal by default.
.c-button--small,
%c-button--small {
  font-size: rem(gesso-font-size(1));
  padding: rem(gesso-spacing(0.5)) rem(gesso-spacing(1));
}
