@shopware-ag/meteor-component-library/dist/mt-checkbox.css

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

.mt-field--checkbox__container {
& .mt-field--checkbox {
    margin-bottom: var(--scale-size-22);
&.mt-switch--future-remove-default-margin {
      margin-bottom: 0;
}
& .mt-inheritance-switch {
&.mt-field__inheritance-icon {
        display: flex;
        justify-content: center;
        align-items: center;
}
}
& .mt-field--checkbox__content {
      display: grid;
      grid-template-columns: 16px 1fr;
      align-items: center;
}
& .mt-field {
      margin-bottom: 0;
& .mt-block-field__block {
        border: none;
}
}
& .mt-field--default {
      display: flex;
}
& .mt-field__label {
      margin-bottom: 0;
      margin-left: var(--scale-size-4);
& .mt-help-text {
        margin-left: var(--scale-size-8);
}
}
& .mt-field__checkbox {
      width: var(--scale-size-16);
      height: var(--scale-size-16);
      position: relative;
&:has(:focus-visible) {
        outline: 2px solid var(--color-border-brand-default);
        outline-offset: 2px;
        border-radius: var(--border-radius-checkbox);
}
& input[type="checkbox"] {
        opacity: 0;
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border: 0 none;
        background: none;
        -webkit-appearance: none;
        cursor: pointer;
        z-index: 2;
&:disabled {
          cursor: not-allowed;
}
&:disabled ~ .mt-field__checkbox-state {
          background: var(--color-background-tertiary-default);
          border-color: var(--color-border-primary-default);
}
&:checked ~ .mt-field__checkbox-state {
          background: var(--color-interaction-primary-default);
          border-color: var(--color-interaction-primary-default);
& .mt-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--color-static-white);
}
}
&:checked:disabled ~ .mt-field__checkbox-state {
          background: var(--color-background-tertiary-default);
          border-color: var(--color-border-primary-default);
& .mt-icon {
            color: var(--color-border-primary-default);
}
}
&:indeterminate ~ .mt-field__checkbox-state {
          background-color: var(--color-interaction-primary-default);
          border: 1px solid var(--color-interaction-primary-default);
& .mt-icon {
            display: inline-block;
            color: var(--color-static-white);
}
}
}
& .mt-field__checkbox-state {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
        text-align: center;
        background: var(--color-background-primary-default);
        color: var(--color-text-primary-default);
        border: 1px solid var(--color-border-primary-default);
        border-radius: var(--border-radius-checkbox);
        display: flex;
        justify-content: center;
        align-items: center;
& .mt-icon {
          display: none;
          color: var(--color-background-primary-default);
}
}
}
&.has--error {
      margin-bottom: 0;
& .mt-field__checkbox-state {
        border: 1px solid var(--color-interaction-critical-default);
}
& .mt-field__label {
        color: var(--color-text-critical-default);
}
& input[type="checkbox"] {
&:disabled ~ .mt-field__checkbox-state {
          border: 1px solid var(--color-interaction-critical-default);
}
&:checked ~ .mt-field__checkbox-state {
          border: 1px solid var(--color-interaction-critical-default);
          background-color: var(--color-interaction-critical-default);
}
&:checked:disabled ~ .mt-field__checkbox-state {
          border: 1px solid var(--color-interaction-critical-default);
}
}
}
&.is--inherited {
& input[type="checkbox"] {
&:checked ~ .mt-field__checkbox-state {
          border-color: var(--color-border-primary-default);
          background: var(--color-background-tertiary-default);
}
}
}
&.is--bordered {
      border-radius: 4px;
      border: 1px solid var(--color-border-primary-default);
      padding: var(--scale-size-16);
&.has--error {
        border-color: var(--color-border-critical-default);
}
}
}
& .mt-field__error {
    margin-bottom: var(--scale-size-14);
&.checkbox-bordered {
      margin-bottom: var(--scale-size-8);
}
}
& .mt-field .mt-block-field__block {
    min-height: unset;
}
}