/* ==========================================================================
   #CHECKBOX
   ========================================================================== */
@layer components {

  /**
   * Checkbox wrapper and styles
   */
  .o-checkbox, .o-radio-button {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .o-checkbox__input {
    margin-right: 8px;
    cursor: pointer;
    border: 1px solid theme('colors.gray-20');
    border-radius: 2px;
  }

  .o-radio-button__input {
    margin-right: 8px;
    cursor: pointer;
    border: 1px solid theme('colors.gray-20');
    border-radius: 100%;
  }

  .o-checkbox__label {
    line-height: 24px;
    margin: initial;
    cursor: pointer;
  }


  /* Hovers
     ========================================================================== */
  .o-checkbox:hover .o-checkbox__label {
    opacity: 0.7;
  }

  .o-checkbox__input:hover {
    border: 1px solid black;
  }


  /* Color variation
     ========================================================================== */
  /**
   * White. Set as sibling due to Simfony restriction passing classes
   */
  .o-checkbox--white ~ .o-checkbox__label {
    color: theme('colors.white');
  }


  /* Font variation
     ========================================================================== */
  /**
   * Display. Set as sibling due to Simfony restriction passing classes
   */
  .o-checkbox--display ~ .o-checkbox__label {
    font-family: Signika;
  }
}
