$error-border: 1px solid $frost-color-input-error-border;

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

  &.error {
    > .label {
      &::before {
        border: $error-border;
      }
    }
  }

  &.small {
    > .label {
      &::before  {
        width: 20px;
        height: 20px;
      }
    }

    svg {
      width: 20px;
      height: 20px;
    }
  }

  &.medium {
    > .label {
      &::before {
        width: 25px;
        height: 25px;
      }
    }

    svg {
      width: 25px;
      height: 25px;
    }
  }

  &.large {
    > .label {
      &::before {
        width: 30px;
        height: 30px;
      }
    }

    svg {
      width: 30px;
      height: 30px;
    }
  }

  .input {
    &[type=checkbox] {
      display: none;
      position: absolute;
      top: 2px;
      left: 2px;
      outline: none;
    }

    &:checked {
      + {
        .label {
          svg {
            visibility: visible;
          }
        }
      }

      &:disabled {
        + {
          .label {
            svg {
              fill: $frost-color-grey-6;
            }
            cursor: default;
          }
        }
      }
    }

    &:focus {
      + {
        .label {
          &::before {
            border: 1px solid $frost-color-grey-5;
            background-image: linear-gradient(lighten($frost-color-blue-1, 50%), lighten($frost-color-blue-1, 45%));
          }
        }
      }
    }
  }

  .label {
    display: inline-block;
    position: relative;
    color: $frost-color-grey-5;
    font-size: $frost-font-s;
    cursor: pointer;
    user-select: none;

    &::before {
      display: inline-block;
      position: relative;
      margin-right: 5px;
      border: 1px solid $frost-color-grey-6;
      background-image: linear-gradient($frost-color-white, $frost-color-input-disabled-bg);
      content: '';
      vertical-align: middle;
    }

    &:focus {
      outline: none;

      &::before {
        border: 1px solid $frost-color-grey-5;
        background-image: linear-gradient(lighten($frost-color-blue-1, 50%), lighten($frost-color-blue-1, 45%));
      }
    }
  }

  input {
    &[disabled] {
      + {
        .label {
          &::before {
            border: 1px solid $frost-color-lgrey-1;
            background-image: linear-gradient($frost-color-input-disabled-bg, $frost-color-input-disabled-bg);
          }
        }
      }
    }

    &:not([disabled]) {
      + {
        .label {
          &.label {
            &:hover {
              &::before {
                background-image: linear-gradient(lighten($frost-color-blue-1, 50%), lighten($frost-color-blue-1, 45%));
              }
            }
          }
        }
      }
    }
  }

  svg {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    fill: $frost-color-blue-1;
  }
}