@use 'sass:color';
@use 'sass:map';
@use 'sass:meta';
@use '../themes/colors';
@use 'variables';

@mixin font-family() {
  --kirby-font-family: 'Roboto';
}

@mixin size-fat-finger() {
  --kirby-size-fat-finger: #{variables.$fat-finger-size};
}

@mixin colors() {
  @each $name, $value in colors.$kirby-colors {
    --kirby-#{$name}: #{$value};
  }
}

@mixin text-colors() {
  @each $name, $value in colors.$kirby-text-colors {
    --kirby-text-color-#{$name}: #{$value};
  }
}

@mixin decoration-colors() {
  @each $name, $ramp in colors.$decoration-colors {
    @each $shade, $value in $ramp {
      --kirby-decoration-color-#{$name}-#{$shade}: #{$value};
    }
  }
}

@mixin white-overlay-colors() {
  @each $shade, $value in colors.$white-overlay-colors {
    --kirby-white-overlay-#{$shade}: #{$value};
  }
}

@mixin dark-overlay-colors() {
  @each $shade, $value in colors.$dark-overlay-colors {
    --kirby-dark-overlay-#{$shade}: #{$value};
  }
}

@mixin border-radii() {
  @each $name, $value in variables.$border-radii {
    --kirby-border-radius-#{$name}: #{$value};
  }
}

@mixin elevations() {
  @each $name, $value in variables.$elevations {
    --kirby-elevation-#{$name}: #{$value};
  }
}

@mixin font-sizes() {
  @each $name, $value in variables.$font-sizes {
    --kirby-font-size-#{$name}: #{$value};
  }
}

@mixin font-weights() {
  @each $name, $value in variables.$font-weight {
    --kirby-font-weight-#{$name}: #{$value};
  }
}

@mixin line-heights() {
  @each $name, $value in variables.$line-height {
    --kirby-line-height-#{$name}: #{$value};
  }
}

@mixin spacings() {
  @each $name, $value in variables.$sizes {
    --kirby-spacing-#{$name}: #{$value};
  }
}

@mixin z-layers() {
  @each $name, $value in variables.$z-layers {
    --kirby-z-index-#{$name}: #{$value};
  }
}

@mixin breakpoints() {
  @each $name, $value in variables.$breakpoints {
    --kirby-breakpoint-#{$name}: #{$value};
  }
}

@mixin transition-soft-keyboard() {
  --kirby-transition-soft-keyboard-enter: #{variables.$soft-keyboard-transition-enter};
  --kirby-transition-soft-keyboard-leave: #{variables.$soft-keyboard-transition-leave};
}

@mixin transition-durations() {
  @each $name, $value in variables.$transition-durations {
    --kirby-transition-duration-#{$name}: #{$value};
  }
}

@mixin transition-easings() {
  @each $name, $value in variables.$transition-easings {
    @if meta.type-of($value) == 'map' {
      @each $subname, $subvalue in $value {
        --kirby-transition-easing-#{$name}-#{$subname}: #{$subvalue};
      }
    } @else {
      --kirby-transition-easing-#{$name}: #{$value};
    }
  }
}

@mixin all() {
  /* FONT-FAMILY */
  @include font-family;

  /* COLORS */
  @include colors;

  /* TEXT-COLORS */
  @include text-colors;

  /* DECORATION-COLORS */
  @include decoration-colors;

  /* OVERLAY-COLORS */
  @include white-overlay-colors;
  @include dark-overlay-colors;

  /* BORDER RADIUS */
  @include border-radii;

  /* ELEVATIONS */
  @include elevations;

  /* FONT-SIZES */
  @include font-sizes;

  /* FONT-WEIGHT */
  @include font-weights;

  /* LINE-HEIGHT */
  @include line-heights;

  /* SPACINGS */
  @include spacings;

  /* FAT FINGER SIZE */
  @include size-fat-finger;

  /* Z-INDEXES */
  @include z-layers;

  /* BREAKPOINTS */
  @include breakpoints;

  /* TRANSITIONS */
  @include transition-durations;
  @include transition-easings;
  @include transition-soft-keyboard;
}