@use "../citrine/abstracts/functions" as *;
@use "../citrine/abstracts/mixins" as *;

.audio-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semi-bold);
  color: var(--accent-color);
  background-color: var(--accent-bg-1);
  border: none;
  cursor: pointer;
  transition:
    background-color var(--transition),
    transform var(--transition-bezier),
    box-shadow var(--transition);

  &:hover {
    background-color: var(--accent-bg-2);
    transform: scale(1.03);
  }

  &:active {
    transform: var(--active);
  }

  &:focus-visible {
    outline: 0.125rem solid var(--accent-color);
    outline-offset: 0.25rem;
  }

  .audio-button-label {
    display: none;

    @media (min-width: 480px) {
      display: inline;
    }
  }
}