/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use './core' as *;
@use '../focus-indicator';
@use '../state-layer';

:host {
  @include host;
}

:host([hidden]) {
  display: none;
}

// Unchecked
.forge-checkbox {
  @include tokens;
}

.forge-checkbox {
  @include checkbox;

  .container {
    @include container;
  }

  .background {
    @include background;
  }

  .icon {
    @include icon;

    &--checked {
      @include icon-checked;
      @include icon-checked-hidden;
    }

    &--indeterminate {
      @include icon-indeterminate;
      @include icon-indeterminate-hidden;
    }
  }

  .label {
    @include label;
  }
}

// Checked
:host([checked]) {
  .background {
    @include background-checked;
  }

  .icon {
    &--checked {
      @include icon-checked-visible;
    }

    &--indeterminate {
      @include icon-indeterminate-hidden;
    }
  }

  forge-state-layer {
    @include state-layer.provide-theme((
      color: #{token(state-layer-checked-color)}
    ));
  }
}

// Indeterminate
:host([indeterminate]) {
  .background {
    @include background-checked;
  }

  .icon {
    &--checked {
      @include icon-checked-hidden;
    }

    &--indeterminate {
      @include icon-indeterminate-visible;
    }
  }

  forge-state-layer {
    @include state-layer.provide-theme((
      color: #{token(state-layer-checked-color)}
    ));
  }
}

// Dense
:host([dense]) {
  .forge-checkbox {
    @include dense;

    .container {
      @include container-dense;
    }
  }
}

:host([disabled]) {
  .forge-checkbox {
    @include checkbox-disabled;

    .container {
      @include container-disabled;
    }
  }
}

// Readonly
:host([readonly]) {
  .forge-checkbox {
    .container {
      @include container-disabled;
    }
  }
}

// Reduced motion
@media (prefers-reduced-motion) {
  .forge-checkbox {
    @include override(animation-duration, 0s, value);
  }
}

forge-state-layer {
  @include state-layer.provide-theme((
    color: #{token(state-layer-unchecked-color)}
  ));
}

forge-focus-indicator {
  @include focus-indicator.provide-theme((
    shape: 0px, // Requires unit
    outward-offset: 8px
  ));
}
