.ob-subscribe-button,
.ob-subscribe-dashboard {
  a {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
    letter-spacing: 0.15px;
    transition: all 0.3s ease-in-out;
    white-space: nowrap;
  }

  a:hover {
    opacity: 0.8;
  }
}

.ob-subscribe-button {
  a {
    color: #010101;
    background-color: var(--site-premium-color);
  }
}

.ob-subscribe-dashboard {
  a {
    color: #fff;
    background-color: var(--site-primary-color);
  }
}

.ob-login-button {
  a {
    background-color: var(--site-primary-color);
    color: #fff;
  }
}

.ob-logout-button {
  a {
    display: inline-flex;
    color: var(--site-primary-color);
    font-size: 0.75rem;
  }

  svg {
    transform: rotate(180deg);
    fill: currentColor;
  }
}

.ob-login-button,
.ob-logout-button {
  a {
    display: inline-flex;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.5rem 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15px;
    transition: all 0.3s ease-in-out;
    white-space: nowrap;
  }

  a:hover {
    opacity: 0.8;
  }

  span {
    display: none;

    @media screen and (min-width: 768px) {
      display: inline-block;
    }
  }

  svg {
    height: 1.2em;
    width: 1.2em;
    fill: currentColor;
  }
}

.ob-auth-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}