:host(us-checkbox) {
  display: flex;
  align-items: center;

  .checkbox-container {
    display: flex;
    align-items: center;
    height: auto;
  }

  .checkbox,
  .checkbox-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--checkbox-base-width);
    height: var(--checkbox-base-height);
    line-height: 1;
    border: var(--checkbox-border-width) solid var(--checkbox-border-color);
    border-radius: var(--checkbox-border-radius);
    background-color: var(--checkbox-unselected-active-bg-color);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    appearance: none;
    cursor: pointer;

    &[hidden] {
      display: none;
    }

    &.control {
      background-color: var(--checkbox-unselected-active-bg-color);
      border-color: var(--checkbox-border-color);

      &:hover {
        background-color: var(--checkbox-unselected-active-hover-bg-color);
        border-color: var(--checkbox-border-color);
      }
    }

    &:hover:not([disabled]) {
      border-color: var(--checkbox-border-color);
      background-color: var(--checkbox-unselected-active-hover-bg-color);
    }

    &[disabled] {
      background-color: var(--checkbox-unselected-inactive-bg-color);
      border-color: var(--checkbox-inactive-border-color);
    }

    &[checked] {
      background-color: var(--checkbox-selected-active-bg-color);
    }

    &[checked]:hover {
      background-color: var(--checkbox-selected-active-hover-bg-color);
      border-color: var(--checkbox-selected-active-hover-bg-color);
    }

    &[checked][disabled] {
      background-color: var(--checkbox-selected-inactive-hover-bg-color);
      border-color: var(--checkbox-selected-inactive-hover-bg-color);
    }
  }

  .info {
    margin-left: calc(var(--space-inline-s) + 2px);
    display: flex;
  }

  .checkbox-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-left: var(--space-inline-m);
    font: var(--text-p-m-light);

    &_empty {
      margin-left: 0;
    }

    &.control-label {
      font: var(--text-label-m);
      color: var(--color-neutral-1000);
    }
  }
}