.d-checkbox {
  display: flex;
}

.d-checkbox-indicator {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;

  > input {
    appearance: none;
    border: 1px solid var(--d-color-neutral-30);
    transition: background-color 0.3s, border-color 0.3s, outline 0.2s;
    border-radius: 4px;
    background-color: var(--d-color-neutral-00);
    cursor: inherit;
    width: 100%;
    height: 100%;

    &:hover:not(:disabled) {
      border-color: var(--d-color-red-70);
    }

    &:disabled {
      background-color: var(--d-color-neutral-10);
      border-color: var(--d-color-neutral-30);
    }

    &:disabled:checked {
      background-color: var(--d-color-neutral-20);
      border-color: var(--d-color-neutral-20);
    }

    &:checked:not(:disabled) {
      background-color: var(--d-color-red-60);
      border-color: var(--d-color-red-60);
    }
  }

  .d-checkbox-indicator-icon {
    color: var(--d-color-neutral-00);
    position: absolute;
    display: none;
    cursor: inherit;
    width: inherit;
    height: inherit;

    > svg {
      width: inherit;
      height: inherit;
    }
  }
}

.d-checkbox-content {
  &:not(.d-checkbox-label:empty) {
    margin-left: 8px;
  }
}

.d-checkbox-label {
  @extend .d-text-body-m;
  color: var(--d-color-neutral-90);
  cursor: pointer;
  user-select: none;
}

// State

.d-checkbox-checked {
  .d-checkbox-indicator-icon {
    display: flex;
  }
}

.d-checkbox-disabled {
  .d-checkbox-indicator {
    cursor: not-allowed;
  }

  .d-checkbox-label {
    color: var(--d-color-neutral-30);
    cursor: not-allowed;
  }

  .d-checkbox-sub-label {
    color: var(--d-color-neutral-30);
  }
}

// Size

.d-checkbox-medium {
  .d-checkbox-indicator {
    width: 20px;
    height: 20px;
  }
}

.d-checkbox-small {
  .d-checkbox-indicator {
    width: 16px;
    height: 16px;
    margin-top: 2px;
  }
}

// Sub label component

.d-checkbox-sub-label {
  color: var(--d-color-neutral-50);
  display: flex;
  @extend .d-text-body-s;
}