@import "import";

.callToAction {
  @include flex;
  max-width: 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;

    @include breakpoint(medium) {
      &: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;
    }

    &:focus-visible {
      outline: 2px solid color(white);
    }
  }

  &.button,
  &.buttonPrimary,
  &.buttonSecondary,
  &.buttonPill,
  &.playButton,
  &.versionButton,
  &.restartButton {
    @include type-item(heading-3);
    width: fit-content;
    padding: 1rem 1.2rem;
    border-radius: rounded(2);

    &:focus-visible {
      outline: 2px solid color(white);
    }
  }

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

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

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

    @include breakpoint(medium) {
      &: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,
  &.playButton {
    background-color: color(black);
    color: color(off-white);
    // backdrop-filter: blur(50px);

    @include breakpoint(medium) {
      &:hover {
        color: var(--color-text);
        background-color: var(--color-text-dim-3);
      }
    }
  }

  &.buttonPill {
    padding: 1.4rem 2.6rem;
    border-radius: rounded(pill);
  }

  &.playButton {
    width: 43px;
    height: 43px;
    padding: 0;
    max-width: none;
    border-radius: var(--border-radius-pill);
    .iconPlay {
      margin-left: 3px;
      margin-top: 1px;
    }
    .iconPause {
      margin-left: -1px;
      margin-top: -1px;
    }

    @include breakpoint(medium) {
      &:hover {
        color: var(--color-text);
        background-color: var(--color-text-dim-3);
      }
    }
  }

  &.versionButton {
    border-radius: var(--border-radius-2);
    background-color: color(white);
    color: color(black);
    @include flex(row, center, center, 0.4rem);
    user-select: none;
    padding: 0.6rem 1rem;

    @include breakpoint(medium) {
      padding: 1rem 1.2rem;
    }

    .span {
      font-family: var(--font-family-serif);
      font-size: 1.4rem;
      font-style: normal;
      font-weight: 650;
      line-height: 1.6rem;
      letter-spacing: -0.0149rem;
    }

    .versionNumber {
      width: 10px;
      display: inline-block;
    }

    @include breakpoint(medium) {
      &:hover {
        color: color(white);
        background-color: var(--color-text-dim-3);
      }
    }
  }

  &.restartButton {
    padding: 0.5rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    @include breakpoint(medium) {
      &:hover {
        background-color: rgba(255, 255, 255, 0.15);
      }
    }
    &:active {
      transition: transform 0.3s ease-out;
      transform: scale(0.82) !important;
    }

    @include breakpoint(medium) {
      padding: 1rem 1.2rem;
    }
  }
}

.iconGroup {
  @include icon-group;
}

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