.amplify-checkbox {
  cursor: var(--amplify-components-checkbox-cursor);
  align-items: var(--amplify-components-checkbox-align-items);
  flex-direction: row-reverse;
  gap: inherit;
  // https://github.com/aws-amplify/amplify-ui/issues/3165
  // without a relatively positioned element in the ancestor tree,
  // focusing the hidden input might break some interfaces
  position: relative;
  &--disabled {
    cursor: var(--amplify-components-checkbox-disabled-cursor);
  }
}

.amplify-checkbox__button {
  position: var(--amplify-components-checkbox-button-position);
  align-items: var(--amplify-components-checkbox-button-align-items);
  justify-content: var(--amplify-components-checkbox-button-justify-content);
  color: var(--amplify-components-checkbox-button-color);
  //these internal css variables are used to update the values that are influenced by multiple modified states
  --amplify-internal-checkbox_button-focused-before-border-color: var(
    --amplify-components-checkbox-button-focus-border-color
  );
  --amplify-internal-checkbox_button-focused-before-box-shadow: var(
    --amplify-components-checkbox-button-focus-box-shadow
  );

  &::before {
    content: '';
    display: inline-block;
    position: absolute;
    box-sizing: border-box;
    width: var(--amplify-components-checkbox-button-before-width);
    height: var(--amplify-components-checkbox-button-before-height);
    border-width: var(--amplify-components-checkbox-button-before-border-width);
    border-radius: var(
      --amplify-components-checkbox-button-before-border-radius
    );
    border-style: var(--amplify-components-checkbox-button-before-border-style);
    border-color: var(--amplify-components-checkbox-button-before-border-color);
  }

  &--focused {
    &::before {
      outline-color: var(
        --amplify-components-checkbox-button-focus-outline-color
      );
      outline-style: var(
        --amplify-components-checkbox-button-focus-outline-style
      );
      outline-width: var(
        --amplify-components-checkbox-button-focus-outline-width
      );
      outline-offset: var(
        --amplify-components-checkbox-button-focus-outline-offset
      );

      border-color: var(
        --amplify-internal-checkbox_button-focused-before-border-color
      );
      box-shadow: var(
        --amplify-internal-checkbox_button-focused-before-box-shadow
      );
    }
  }

  &--error {
    &::before {
      border-color: var(
        --amplify-components-checkbox-button-error-border-color
      );
    }
    // Note: this resets the value of focused state border-color style when an error occurs
    --amplify-internal-checkbox_button-focused-before-border-color: var(
      --amplify-components-checkbox-button-error-focus-border-color
    );
    --amplify-internal-checkbox_button-focused-before-box-shadow: var(
      --amplify-components-checkbox-button-error-focus-box-shadow
    );
  }

  &--disabled::before {
    border-color: var(
      --amplify-components-checkbox-button-disabled-border-color
    );
  }
}

.amplify-checkbox__icon {
  background-color: var(--amplify-components-checkbox-icon-background-color);
  opacity: var(--amplify-components-checkbox-icon-opacity);
  transform: var(--amplify-components-checkbox-icon-transform);
  border-radius: var(--amplify-components-checkbox-icon-border-radius);
  transition-property: var(
    --amplify-components-checkbox-icon-transition-property
  );
  transition-duration: var(
    --amplify-components-checkbox-icon-transition-duration
  );
  transition-timing-function: var(
    --amplify-components-checkbox-icon-transition-timing-function
  );

  --amplify-internal-checkbox-icon-disabled-background-color: var(
    --amplify-components-checkbox-icon-background-color
  );

  &--checked {
    opacity: var(--amplify-components-checkbox-icon-checked-opacity);
    transform: var(--amplify-components-checkbox-icon-checked-transform);

    // changes disabled state background-color when checked
    --amplify-internal-checkbox-icon-disabled-background-color: var(
      --amplify-components-checkbox-icon-checked-disabled-background-color
    );
  }

  &--indeterminate {
    opacity: var(--amplify-components-checkbox-icon-indeterminate-opacity);
    transform: var(--amplify-components-checkbox-icon-indeterminate-transform);

    // changes disabled state background-color when indeterminate
    --amplify-internal-checkbox-icon-disabled-background-color: var(
      --amplify-components-checkbox-icon-indeterminate-disabled-background-color
    );
  }

  &--disabled {
    background-color: var(
      --amplify-internal-checkbox-icon-disabled-background-color
    );
  }
}

.amplify-checkbox__label[data-disabled='true'] {
  color: var(--amplify-components-checkbox-label-disabled-color);
}