@import "import";

.callToAction {
  @include flex;
  max-width: fit-content;
  height: fit-content;
  cursor: pointer;

  .inner {
    @include flex($gap: spacer(2));
    width: 100%;
    height: 100%;

    & > * {
      @include inherit-type;
      height: 1em;
    }
  }

  &.linkPrimary {
    @include type-item(heading-2);
    @include transition(opacity);
    color: color(text);
    opacity: 0.6;

    &:hover {
      opacity: 1;
    }
  }

  &.linkInline {
    @include inherit-type;
    display: inline;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 0.05em;

    .inner {
      display: unset;
    }
  }

  &.button,
  &.buttonPrimary,
  &.buttonSecondary,
  &.buttonPill {
    @include button;
    @include type-item(button);
  }

  &.buttonPrimary,
  &.buttonSecondary,
  &.buttonPill {
    @include transition("background-color, color, transform");

    &:active {
      transform: scale(0.98);
    }
  }

  &.buttonPrimary {
    background-color: color(text);
    color: color(background);
    line-height: 1;

    &:hover {
      background-color: color(text-dim-3);
      color: color(background);
      backdrop-filter: blur(50px);

      @include breakpoint(medium) {
        color: color(text);
      }
    }

    &:active {
      background-color: color(text-secondary);
      color: color(background);
    }
  }

  &.buttonSecondary,
  &.buttonPill {
    background-color: color(text-dim-1);
    color: color(text);
    backdrop-filter: blur(50px);

    &:hover {
      background-color: color(text-dim-3);
    }
  }

  &.buttonPill {
    @include button(small);
    border-radius: rounded(pill);
  }
}

.iconGroup {
  @include icon-group;
}

.soundButton {
  padding-right: spacer(4) !important;
}