@import "../../themes/liberty.globals";

:host {
  display: inline-block;

  button {
    @include padding(0);
    display: flex;

    border: none;

    outline: none;

    background-color: transparent;

    font-size: 1em;

    line-height: 1.5;

    text-align: var(--lu-checkbox-button-text-align, center);

    cursor: pointer;
  }
}

:host(:focus),
:host(:hover) {
  outline: none;

  button {
    color: $primary_light;
  }

  button .checkbox .box,
  button .checkbox .box {
    stroke: $primary_light;
  }
}

.checkbox {
  display: inline-block;
  position: relative;

  cursor: pointer;
}

.checkbox svg {
  @include margin(0, .5em, 0, 0);
  position: relative;
  bottom: -2px;

  width: 1.125em;
  height: 1.125em;
}

.checkbox .box {
  fill: none;
  stroke: $primary_light;
  stroke-width: 2;

  transition: stroke .09s ease-out;
}

.checkbox polyline {
  fill: none;
  stroke: $primary_light;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: miter;
  stroke-dasharray: 20;
  stroke-dashoffset: 21;

  transition: stroke-dashoffset .09s ease-in-out;
}

.checkbox.checked svg .box {
  fill: none;
  stroke: $primary_light;
}

.checkbox.checked polyline {
  stroke-dashoffset: 0;
}

:host([disabled]) {
  .checkbox .box {
    stroke: $neutral_light;
  }

  button {
    color: $neutral_light;
  }
}

:host([disabled]:focus),
:host([disabled]:hover) {

  button .checkbox .box,
  button .checkbox .box {
    /* stylelint-disable-next-line declaration-no-important */
    stroke: $neutral_light !important;
  }
}