@use "./effect";
@use "./text";
@use "./media";

@mixin button($background) {
  & {
    width: var(--padding-4x);
    min-width: var(--padding-4x);
    height: var(--padding-4x);

    padding: var(--padding-0_5x);
    margin: 0 var(--padding-0_5x);
  }

  @include effect.ripple-effect($background, var(--primary-contrast));

  &:focus {
    background: var(--primary-tint);
    @include effect.ripple-effect($background, var(--primary-contrast));
  }

  @include media.min-width(large) {
    color: var(--content-color);
  }
}

@mixin title {
  margin: 0;

  color: var(--content-color);

  grid-column-start: 2;

  @include text.clamp(2);

  text-align: center;

  line-height: inherit;
}