libs/barista-components/checkbox/src/checkbox.scss
@import '../../core/src/style/variables';
@import '../../core/src/style/interactive-common';
@import '../../core/src/style/transition';
@import '../../style/font-mixins';
@import './checkbox-theme';

$dt-checkbox-size: 20px;

.dt-checkbox-label {
  display: flex;
  align-items: center;

  &:hover {
    cursor: pointer;
  }
}

.dt-checkbox-input {
  clip: rect(0 0 0 0);
  position: absolute;
}

.dt-checkbox-container {
  width: $dt-checkbox-size;
  height: $dt-checkbox-size;
  border: solid 2px $turquoise-600;
  margin-right: 8px;
  @include dt-form-input-color-transition();

  // Box sizing is required here so we do not inherit the value
  // and therefore can not predict the way the size of the container
  box-sizing: border-box;
}

.dt-checkbox-content {
  @include dt-main-font();
}

.dt-checkbox-icon {
  width: $dt-checkbox-size - 4;
  height: $dt-checkbox-size - 4;
}

.dt-checkbox-icon svg {
  display: block;
  stroke: $turquoise-600;
  width: $dt-checkbox-size - 4;
  height: $dt-checkbox-size - 4;
  transition: stroke ease 280ms;
}

:host {
  display: inline-block;

  &:hover {
    .dt-checkbox-container {
      border-color: $turquoise-700;
    }

    .dt-checkbox-icon svg {
      stroke: $turquoise-700;
    }
  }

  &:active {
    .dt-checkbox-container {
      border-color: $turquoise-800;
    }

    .dt-checkbox-icon svg {
      stroke: $turquoise-800;
    }
  }

  &.dt-checkbox-focused .dt-checkbox-container {
    @include dt-focus-style();
  }

  &.dt-checkbox-disabled {
    .dt-checkbox-label {
      cursor: default;
    }

    .dt-checkbox-container {
      border-color: $disabledcolor;
    }

    .dt-checkbox-icon svg {
      stroke: $disabledcolor;
    }
  }
}

.dt-checkbox-checkmark,
.dt-checkbox-indeterminate {
  animation-fill-mode: forwards;
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(0.14, 0, 0, 1);
}

.dt-checkbox-checkmark {
  stroke-dashoffset: 560;
}

.dt-checkbox-indeterminate {
  stroke-dashoffset: 352;
}

@keyframes dt-checkbox-check {
  0% {
    stroke-dashoffset: 560;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes dt-checkbox-uncheck {
  0% {
    stroke-dashoffset: 1120;
  }
  100% {
    stroke-dashoffset: 560;
  }
}

@keyframes dt-checkbox-indeterminate {
  0% {
    stroke-dashoffset: 352;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes dt-checkbox-determined {
  0% {
    stroke-dashoffset: 704;
  }
  100% {
    stroke-dashoffset: 352;
  }
}

:host.dt-checkbox-anim-unchecked-checked .dt-checkbox-checkmark {
  animation-name: dt-checkbox-check;
}
:host.dt-checkbox-anim-checked-unchecked .dt-checkbox-checkmark,
:host.dt-checkbox-anim-checked-indeterminate .dt-checkbox-checkmark {
  animation-name: dt-checkbox-uncheck;
}
:host.dt-checkbox-anim-unchecked-indeterminate .dt-checkbox-indeterminate {
  animation-name: dt-checkbox-indeterminate;
}
:host.dt-checkbox-anim-checked-indeterminate .dt-checkbox-indeterminate {
  animation-name: dt-checkbox-indeterminate;
  animation-delay: 150ms;
}
:host.dt-checkbox-anim-indeterminate-checked .dt-checkbox-indeterminate {
  animation-name: dt-checkbox-determined;
}
:host.dt-checkbox-anim-indeterminate-checked .dt-checkbox-checkmark {
  animation-name: dt-checkbox-check;
  animation-delay: 150ms;
}
:host.dt-checkbox-anim-indeterminate-unchecked .dt-checkbox-indeterminate {
  animation-name: dt-checkbox-determined;
}

// Disabling checkbox animation on IE and falling back
// to just show and hide of svg paths
// Needs to be done, because IE / Edge do not support
// animation of stroke-dashoffset
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6493460/
:host.dt-checkbox-animation-fallback {
  .dt-checkbox-checkmark,
  .dt-checkbox-indeterminate {
    animation-fill-mode: none;
    stroke-dasharray: 0 !important;
    stroke-dashoffset: 0 !important;
    animation-name: void !important;
    animation-duration: 0;
    animation-delay: 0;
    opacity: 0;
  }
  &.dt-checkbox-anim-unchecked-checked .dt-checkbox-checkmark,
  &.dt-checkbox-anim-unchecked-indeterminate .dt-checkbox-indeterminate,
  &.dt-checkbox-anim-checked-indeterminate .dt-checkbox-indeterminate,
  &.dt-checkbox-anim-indeterminate-checked .dt-checkbox-checkmark {
    opacity: 1;
  }
  &.dt-checkbox-anim-checked-unchecked .dt-checkbox-checkmark,
  &.dt-checkbox-anim-checked-indeterminate .dt-checkbox-checkmark,
  &.dt-checkbox-anim-indeterminate-checked .dt-checkbox-indeterminate,
  &.dt-checkbox-anim-indeterminate-unchecked .dt-checkbox-indeterminate {
    opacity: 0;
  }
}
