@use 'base/partials/media-queries' as media;

// ==============================================================================
// Icons
// ==============================================================================
$size-icon-small: 16px;
$size-icon-medium: 24px;
$size-icon-large: 32px;
$size-icon-xlarge: 48px;
$size-icon-headline: 56px;
$size-icon-huge: 64px;

// ==============================================================================
// Paddings
// ==============================================================================
$padding-48: 48px; // TODO: For grids?
$padding-32: 32px;
$padding-30: 30px;
$padding-24: 24px;
$padding-18: 18px;
$padding-16: 16px;
$padding-12: 12px;
$padding-8: 8px;

// ==============================================================================
// Angles
// ==============================================================================
$deg-135: 135deg;

// ==============================================================================
// Controls
// ==============================================================================
$control-height-desktop: 32px;
$control-height-touch: 32px;
$control-min-width: 160px;

@mixin height-control {
  @include media.pointer-coarse {
    height: $control-height-touch;
  }

  @include media.pointer-fine {
    height: $control-height-desktop;
  }
}