// Copyright 2018-Present Okta, Inc.

// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at

// http://www.apache.org/licenses/LICENSE-2.0

// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/* stylelint-disable no-descending-specificity, max-nesting-depth */

// ASA: https://github.com/okta/odyssey/pull/13
input.checkbox {
  @include is-visually-hidden;

  &:checked {
    + .checkbox--label {
      &::before {
        border-color: cv('action', 'base');
        background-color: cv('action', 'base');
      }
    }
  }

  &:focus {
    + .checkbox--label {
      &::before {
        border-color: cv('action', 'base');
        box-shadow: 0 0 0 2px fauxpacity(cv('action', 'base'));
      }
    }
  }

  &:disabled {
    + .checkbox--label {
      color: $text-sub;
      cursor: not-allowed;

      &::before {
        border-color: cv('gray', '200');
        background-color: cv('gray', '000');
      }
    }

    &:checked {
      + .checkbox--label {
        &::before {
          border-color: fauxpacity(cv('action', 'base'));
          background-color: fauxpacity(cv('action', 'base'));
        }
      }
    }
  }

  &[data-invalid] {
    + .checkbox--label {
      &::before {
        border-color: cv('danger');
      }
    }

    &:checked {
      + .checkbox--label {
        &::before {
          background-color: cv('danger', 'base');
        }
      }
    }

    &:focus {
      + .checkbox--label {
        &::before {
          border-color: cv('danger', 'base');
          box-shadow: 0 0 0 2px fauxpacity(cv('danger', 'base'));
        }
      }
    }

    &:disabled {
      + .checkbox--label {
        color: $text-sub;

        &::before {
          border-color: fauxpacity(cv('danger', 'base'));
        }
      }

      &:checked {
        + .checkbox--label {
          &::before {
            border-color: fauxpacity(cv('danger', 'base'));
            background-color: fauxpacity(cv('danger', 'base'));
          }
        }
      }
    }
  }
}

.checkbox--label {
  display: block;
  position: relative;
  margin-bottom: $tiny-spacing;
  padding-left: 1em + $em-tiny-spacing;
  font-size: ms(0);
  font-weight: 400;
  text-align: left;

  &::before,
  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 1em;
    height: 1em;
    transition-property: border-color, background, opacity, box-shadow;
    transition-duration: $base-duration;
    transition-timing-function: $base-timing;
    border: 2px solid transparent;
    border-radius: $base-border-radius;
  }

  // Box
  &::before {
    transform: translateY(-50%);
    border-color: $base-border-color;
    box-shadow: 0 0 0 0 fauxpacity(cv('action', 'base'));
  }

  // Check
  &::after {
    transform: translateY(-50%) scale(0.9);
    background-image: get-icon('check', $white);
    background-repeat: no-repeat;
    background-position: center;
  }

  &:hover {
    &::before {
      border-color: cv('action', 'base');
    }
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.table {
  .checkbox--label {
    &:empty {
      height: calc(1em * #{$heading-line-height});
    }
  }
}