@mixin sizes() {
  --emoji-padding: 0.5rem;
  --emoji-size: 1.375rem;
  --indicator-height: 3px;
  --input-border-radius: 0.5rem;
  --input-border-size: 1px;
  --input-font-size: 1rem;
  --input-line-height: 1.5;
  --input-padding: 0.25rem;
  --num-columns: 8;
  --outline-size: 2px;
}

@mixin colors($dark) {
  $bg: #fff;
  $border: #e0e0e0;
  $indicator: #385ac1;
  $input-border: #999;
  $input-color: #111;
  $input-placeholder: #999;
  $outline: #999;


  @if $dark {
    $bg: #222;
    $border: #444;
    $indicator: #5373ec;
    $input-border: #ccc;
    $input-color: #efefef;
    $input-placeholder: #ccc;
    $outline: #fff;
  }

  --background-color: #{$bg};
  --border-color: #{$border};
  --indicator-color: #{$indicator};
  --input-border-color: #{$input-border};
  --input-font-color: #{$input-color};
  --input-placeholder-color: #{$input-placeholder};
  --outline-color: #{$outline};

  @if $dark {
    --active-background-color: #{lighten($bg, 20%)};
    --hover-background-color: #{lighten($bg, 15%)};
  }

  @else {
    --active-background-color: #{darken($bg, 10%)};
    --hover-background-color: #{darken($bg, 15%)};
  }
}

:host {
  @include sizes();
}

:host,
:host(.light) {
  @include colors(false);
}

:host(.dark) {
  @include colors(true);
}

@media (prefers-color-scheme: dark) {
  :host {
    @include colors(true);
  }
}