@import './EditorCheckBox.module.scss';

.editor-checkbox {
  font-size: 10pt;

  .ch-content {
    border: unset;

    .icon {
      @include partial-column-center;
      width: 24px;

      .ch-pipe-on, .ch-pipe-off {
        height: 14px;
        width: 24px;
        border-radius: 8px;
      }

      .ch-c {
        height: 10px;
        width: 10px;
        border-radius: 8px;
      }

      .ch-pipe-on {
        background-color: $checkbox_pipe_on_bg;

        .ch-c {
          margin-top: 2px;
          margin-left: 12px;
          background-color: $checkbox_pipe_on_checked_bg;
        }
      }

      .ch-pipe-off {
        background-color: $checkbox_pipe_off_bg;

        .ch-c {
          margin-top: 2px;
          margin-left: 2px;
          background-color: $checkbox_pipe_off_checked_bg;
        }
      }
    }

    &.disabled {
      background-color: unset;

      .icon {
        .ch-pipe-on, .ch-pipe-off {
          background-color: $checkbox_pipe_disabled;
        }
      }
    }
  }
}