@use 'variables' as *;

@mixin icon-btn($size: 28px, $shape: 50%) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: $size;
  height: $size;
  border-radius: $shape;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: opacity $transition-fast, background $transition-fast, color $transition-fast;

  svg { pointer-events: none; }
}

@mixin card($bg: $color-card-white, $radius: $radius-lg) {
  background: $bg;
  border-radius: $radius;
  box-shadow: $shadow-card;
}

@mixin page-shell {
  min-height: 100vh;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}

@mixin section-header {
  background: linear-gradient(135deg, var(--color-header-from) 0%, var(--color-header-to) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: $space-6;
  box-shadow: $shadow-header;
}

@mixin text-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin form-label {
  font-size: $font-size-sm;
  color: $color-text-muted;
  text-align: right;
  padding-right: $space-2;
  white-space: nowrap;
}