@import '~scss/colors.module.scss';

%toggle-active {
  color: $color-plum-700;
  span {
    border-bottom: 3px solid $color-plum-700;
    @media (max-width: $viewport-md) {
      border-bottom: 2px solid #31347a;
    }
  }
}

%toggle-inactive {
  color: $color-plum-400;
  span {
    border-bottom: none;
  }
}

%toggle-unavailable {
  color: $color-slate-400;

  display: flex;
  align-items: center;

  pointer-events: none;

  .bang {
    max-width: 22px;
    @include margin(4, right);
  }
}

%toggle-unavailable,
.unavailable-wrapper {
  cursor: not-allowed;
}

.toggle {
  display: flex;
  cursor: pointer;

  @media (max-width: $viewport-md) {
    // todo complete mobile styles here
    flex-direction: column;
    align-items: flex-start;
  }

  @include margin(32, bottom);

  & > button,
  & > div {
    @include padding(32, (left, right));

    &:first-child {
      @include padding(0, left);
    }

    @media (max-width: $viewport-md) {
      @include padding(0, left);
      @include margin(8, bottom);
    }
  }

  & > div button {
    @include padding(0, left);
  }

  button {
    @extend %toggle-inactive;

    border: none;
    background-color: transparent;

    cursor: pointer;

    @include type-size(400);
    line-height: 1.5;
    font-weight: bold;

    &.active {
      @extend %toggle-active;
    }

    &.unavailable {
      @extend %toggle-unavailable;
    }
  }
}

.embed {
  @include margin(32, top);
  button {
    font-size: 1.25rem; // ignore-style-rule
  }
}

.does-not-report-container {
  img {
    width: 22px;
    margin-bottom: -4px; // ignore-style-rule
    @include margin(4, right);
  }
}
