// mixins.scss

@mixin d-flex($justify: center, $align: center) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
}

@mixin button-style($bg: $primary, $color: #fff) {
  background-color: $bg;
  color: $color;
  padding: $space10 $space20;
  border: none;
  border-radius: $border-radius-sm;
  cursor: pointer;
  transition: background 0.3s ease;

  &:hover {
    background-color: darken($bg, 10%);
  }
}

@mixin form-control {
  padding: $space10;
  border: 1px solid #ccc;
  border-radius: $border-radius-xs;
  font-size: $font-size-base;
  width: 100%;

  &:focus {
    outline: none;
    border-color: $primary;
    box-shadow: 0 0 5px rgba($primary, 0.5);
  }
}