@use '_mixins';

.subscribe-button {
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  padding: 0;

  &__label,
  &__subscriber-count {
    @include mixins.button-common;
  }

  &:focus-visible,
  &:hover {
    outline: none;

    > * {
      @include mixins.button-active;
    }
  }

  &:disabled {
    @include mixins.button-disabled;
  }

  &__label {
    margin-right: 2px;
  }

  &__subscriber-count {
    --padding-h: 0;
    min-width: 8ch;
  }

  &--unsubscribe &__label,
  &--unsubscribe &__subscriber-count {
    @include mixins.button-secondary;
  }

  &__dummy-label {
    display: block;
    height: 0;
    visibility: hidden;
  }
}