.snake-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  background-color: rgba(31, 29, 32, 0.8);
  border: 2px solid rgba(132, 132, 132, 0.6);
  border-top: none;
  border-bottom: none;
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
  overflow: visible;
}

/* Border segments for top and bottom */
.snake-filter::before,
.snake-filter::after {
  content: '';
  position: absolute;
  height: 2px;
  background-color: rgba(132, 132, 132, 0.6);
  transition: background-color var(--transition-fast);
  width: 15px;
}

/* Top border segments */
.snake-filter::before {
  top: -2px;
  left: -2px;
}

.snake-filter__bracket--right {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 15px;
  height: 2px;
  background-color: rgba(132, 132, 132, 0.6);
  transition: background-color var(--transition-fast);
}

/* Bottom border segments */
.snake-filter::after {
  bottom: -2px;
  left: -2px;
}

.snake-filter__bracket--left {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 15px;
  height: 2px;
  background-color: rgba(132, 132, 132, 0.6);
  transition: background-color var(--transition-fast);
}

/* Content wrapper */
.snake-filter__content {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  position: relative;
  z-index: 1;
}

/* Sizes */
.snake-filter--small {
  font-size: var(--font-size-sm);
}

.snake-filter--small .snake-filter__content {
  padding: 2px var(--spacing-lg);
  min-height: 24px;
}

.snake-filter--medium {
  font-size: var(--font-size-base);
}

.snake-filter--medium .snake-filter__content {
  padding: 4px var(--spacing-xl);
  min-height: 32px;
}

.snake-filter--large {
  font-size: var(--font-size-lg);
}

.snake-filter--large .snake-filter__content {
  padding: 6px calc(var(--spacing-xl) + 8px);
  min-height: 40px;
}

/* Icon and Count */
.snake-filter__icon {
  display: flex;
  align-items: center;
  font-size: 1.1em;
}

.snake-filter__label {
  white-space: nowrap;
}

.snake-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 4px;
  font-size: 0.75em;
  font-weight: var(--font-weight-semibold);
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* States */
.snake-filter:hover:not(:disabled) {
  background-color: rgba(31, 29, 32, 1);
  border-color: rgba(189, 189, 189, 0.8);
}

.snake-filter:hover:not(:disabled)::before,
.snake-filter:hover:not(:disabled)::after,
.snake-filter:hover:not(:disabled) .snake-filter__bracket--left,
.snake-filter:hover:not(:disabled) .snake-filter__bracket--right {
  background-color: rgba(189, 189, 189, 0.8);
}

.snake-filter:active:not(:disabled) {
  transform: translateY(1px);
}

.snake-filter:focus {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-bg-base),
    0 0 0 4px rgba(132, 132, 132, 0.5);
}

/* Active state */
.snake-filter--active {
  background-color: rgba(31, 29, 32, 1);
  border-color: var(--color-text-primary);
}

.snake-filter--active::before,
.snake-filter--active::after,
.snake-filter--active .snake-filter__bracket--left,
.snake-filter--active .snake-filter__bracket--right {
  background-color: var(--color-text-primary);
}

/* Disabled state */
.snake-filter:disabled,
.snake-filter--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Variant: Success */
.snake-filter--success {
  background-color: rgba(80, 250, 123, 0.1);
  border-color: rgba(80, 250, 123, 0.6);
}

.snake-filter--success::before,
.snake-filter--success::after,
.snake-filter--success .snake-filter__bracket--left,
.snake-filter--success .snake-filter__bracket--right {
  background-color: rgba(80, 250, 123, 0.6);
}

.snake-filter--success:hover:not(:disabled) {
  background-color: rgba(80, 250, 123, 0.2);
  border-color: rgba(80, 250, 123, 0.8);
}

.snake-filter--success:hover:not(:disabled)::before,
.snake-filter--success:hover:not(:disabled)::after,
.snake-filter--success:hover:not(:disabled) .snake-filter__bracket--left,
.snake-filter--success:hover:not(:disabled) .snake-filter__bracket--right {
  background-color: rgba(80, 250, 123, 0.8);
}

.snake-filter--success.snake-filter--active {
  background-color: rgba(80, 250, 123, 0.3);
  border-color: var(--color-success);
}

.snake-filter--success.snake-filter--active::before,
.snake-filter--success.snake-filter--active::after,
.snake-filter--success.snake-filter--active .snake-filter__bracket--left,
.snake-filter--success.snake-filter--active .snake-filter__bracket--right {
  background-color: var(--color-success);
}

.snake-filter--success .snake-filter__count {
  background-color: rgba(80, 250, 123, 0.2);
  border-color: rgba(80, 250, 123, 0.4);
}

/* Variant: Warning */
.snake-filter--warning {
  background-color: rgba(241, 250, 140, 0.1);
  border-color: rgba(241, 250, 140, 0.6);
}

.snake-filter--warning::before,
.snake-filter--warning::after,
.snake-filter--warning .snake-filter__bracket--left,
.snake-filter--warning .snake-filter__bracket--right {
  background-color: rgba(241, 250, 140, 0.6);
}

.snake-filter--warning:hover:not(:disabled) {
  background-color: rgba(241, 250, 140, 0.2);
  border-color: rgba(241, 250, 140, 0.8);
}

.snake-filter--warning:hover:not(:disabled)::before,
.snake-filter--warning:hover:not(:disabled)::after,
.snake-filter--warning:hover:not(:disabled) .snake-filter__bracket--left,
.snake-filter--warning:hover:not(:disabled) .snake-filter__bracket--right {
  background-color: rgba(241, 250, 140, 0.8);
}

.snake-filter--warning.snake-filter--active {
  background-color: rgba(241, 250, 140, 0.3);
  border-color: var(--color-warning);
}

.snake-filter--warning.snake-filter--active::before,
.snake-filter--warning.snake-filter--active::after,
.snake-filter--warning.snake-filter--active .snake-filter__bracket--left,
.snake-filter--warning.snake-filter--active .snake-filter__bracket--right {
  background-color: var(--color-warning);
}

.snake-filter--warning .snake-filter__count {
  background-color: rgba(241, 250, 140, 0.2);
  border-color: rgba(241, 250, 140, 0.4);
}

/* Variant: Danger */
.snake-filter--danger {
  background-color: rgba(255, 85, 85, 0.1);
  border-color: rgba(255, 85, 85, 0.6);
}

.snake-filter--danger::before,
.snake-filter--danger::after,
.snake-filter--danger .snake-filter__bracket--left,
.snake-filter--danger .snake-filter__bracket--right {
  background-color: rgba(255, 85, 85, 0.6);
}

.snake-filter--danger:hover:not(:disabled) {
  background-color: rgba(255, 85, 85, 0.2);
  border-color: rgba(255, 85, 85, 0.8);
}

.snake-filter--danger:hover:not(:disabled)::before,
.snake-filter--danger:hover:not(:disabled)::after,
.snake-filter--danger:hover:not(:disabled) .snake-filter__bracket--left,
.snake-filter--danger:hover:not(:disabled) .snake-filter__bracket--right {
  background-color: rgba(255, 85, 85, 0.8);
}

.snake-filter--danger.snake-filter--active {
  background-color: rgba(255, 85, 85, 0.3);
  border-color: var(--color-danger);
}

.snake-filter--danger.snake-filter--active::before,
.snake-filter--danger.snake-filter--active::after,
.snake-filter--danger.snake-filter--active .snake-filter__bracket--left,
.snake-filter--danger.snake-filter--active .snake-filter__bracket--right {
  background-color: var(--color-danger);
}

.snake-filter--danger .snake-filter__count {
  background-color: rgba(255, 85, 85, 0.2);
  border-color: rgba(255, 85, 85, 0.4);
}

/* Variant: Info */
.snake-filter--info {
  background-color: rgba(97, 218, 251, 0.1);
  border-color: rgba(97, 218, 251, 0.6);
}

.snake-filter--info::before,
.snake-filter--info::after,
.snake-filter--info .snake-filter__bracket--left,
.snake-filter--info .snake-filter__bracket--right {
  background-color: rgba(97, 218, 251, 0.6);
}

.snake-filter--info:hover:not(:disabled) {
  background-color: rgba(97, 218, 251, 0.2);
  border-color: rgba(97, 218, 251, 0.8);
}

.snake-filter--info:hover:not(:disabled)::before,
.snake-filter--info:hover:not(:disabled)::after,
.snake-filter--info:hover:not(:disabled) .snake-filter__bracket--left,
.snake-filter--info:hover:not(:disabled) .snake-filter__bracket--right {
  background-color: rgba(97, 218, 251, 0.8);
}

.snake-filter--info.snake-filter--active {
  background-color: rgba(97, 218, 251, 0.3);
  border-color: #61dafb;
}

.snake-filter--info.snake-filter--active::before,
.snake-filter--info.snake-filter--active::after,
.snake-filter--info.snake-filter--active .snake-filter__bracket--left,
.snake-filter--info.snake-filter--active .snake-filter__bracket--right {
  background-color: #61dafb;
}

.snake-filter--info .snake-filter__count {
  background-color: rgba(97, 218, 251, 0.2);
  border-color: rgba(97, 218, 251, 0.4);
}
