// Witchy theme mixins and common styles

@mixin card-style {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--witch-lavender);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--witch-shadow);
    border-color: var(--witch-mauve);
  }
}

@mixin button-style($bg-color: var(--witch-rose), $text-color: var(--witch-moon)) {
  padding: 0.5rem 1rem;
  background-color: $bg-color;
  color: $text-color;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--witch-shadow);
    opacity: 0.9;
  }

  &:active {
    transform: translateY(0);
  }
}

@mixin form-input-style {
  width: 100%;
  padding: 0.5rem;
  background-color: var(--witch-moon);
  border: 2px solid var(--witch-lavender);
  border-radius: 4px;
  font-size: inherit;
  color: var(--witch-purple);
  transition: border-color 0.3s;

  &:focus {
    outline: none;
    border-color: var(--witch-rose);
    box-shadow: 0 0 0 3px rgba(168, 87, 126, 0.2);
  }
}

// Common component styles
.btn-primary {
  @include button-style(var(--witch-rose), var(--witch-moon));
}

.btn-secondary {
  @include button-style(var(--witch-mauve), var(--witch-purple));
}

.btn-danger {
  @include button-style(var(--witch-plum), var(--witch-moon));
}

.filter-btn {
  @include button-style(var(--witch-lavender), var(--witch-purple));

  &.active {
    background-color: var(--witch-rose);
    color: var(--witch-moon);
  }
}