// ==========================================================================
// Buttons
// ==========================================================================

// Shared
.button,
.button__count {
  align-items: center;
  border: 0;
  border-radius: $border-radius-medium;
  display: inline-flex;
  padding: ($spacing-base * 0.75);
  position: relative;
  text-shadow: none;
  user-select: none;
  vertical-align: middle;
}

// Buttons
.button {
  --shadow-color: 0deg 0% 20%;
  align-items: center;
  background-color: $color-button-background;
  background-image: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.05));
  border: 1px solid darken($color-button-background, 5);
  box-shadow: 0 0.8px 1px hsl(var(--shadow-color) / 0.05), 0 1.3px 1.6px -1px hsl(var(--shadow-color) / 0.06),
    0 2.8px 3.4px -2px hsl(var(--shadow-color) / 0.07);
  color: $color-button-text;
  display: inline-flex;
  font-weight: $font-weight-bold;
  gap: 0.25rem;
  padding-left: ($spacing-base * 1.25);
  padding-right: ($spacing-base * 1.25);
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;

  &:hover,
  &:focus {
    background: $color-button-background-hover;
    border-color: darken($color-button-background, 7);

    // Remove the underline/border
    &::after {
      display: none !important;
    }
  }

  &:focus {
    outline: 0;
  }

  &:focus-visible {
    @include focus-visible($color-button-background);
  }

  &:active {
    box-shadow: none;
    top: 1px;
  }

  .icon {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
    flex-shrink: 0;
  }
}

// Count bubble
.button__count {
  animation: fade-in 0.2s ease;
  background: $color-button-count-background;
  border: 1px solid $color-gray-100;
  color: $color-button-count-text;
  margin-left: ($spacing-base * 0.75);

  &::before {
    background-color: $color-button-count-background;
    border: inherit;
    border-width: 0 0 1px 1px;
    content: '';
    display: block;
    height: 8px;
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(50%) translateX(-1px) rotate(45deg);
    width: 8px;
  }
}