:host {
  display: inline-block;
}

label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;

  * {
    cursor: pointer;
  }

  input {
    margin: 0;
    background-color: var(--color-surface-primary);
    appearance: none;
    border: var(--border-width-sm) solid var(--color-border-primary);

    /**
     Sizes
    **/
    //default size is sm
    height: var(--scale-400);
    width: var(--scale-400);

    //size small
    &.md {
      height: var(--scale-500);
      width: var(--scale-500);
    }

    //size extra sm
    &.xs {
      height: 14px;
      width: 14px;
    }

    /**
     States
    **/
    &:hover {
      border-color: var(--color-border-action-hover);
      background-color: var(--color-surface-action-solid-hover-light);
    }

    &:focus-visible {
      outline: var(--border-width-sm) solid var(--color-border-focus);
      outline-offset: 1px;
    }

    &:disabled,
    &:disabled:checked {
      background-color: var(--color-surface-disabled);
      border-color: var(--color-border-disabled);
      cursor: not-allowed;

      &:checked {
        fill: var(--color-icon-disabled);
        background-color: var(--color-surface-disabled);
        border-color: var(--color-border-disabled);
      }
    }

    &.report-validity:invalid {
      background-color: var(--color-surface-error);
      border-color: var(--color-border-error);
    }

    &:checked {
      background-color: var(--color-surface-action-solid);
      border-color: var(--color-surface-action-solid);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;

      &:hover:not(:disabled) {
        background-color: var(--color-surface-action-solid-hover) !important;
        border-color: var(--color-icon-action-hover) !important;
      }
    }
  }
  /**
    Checkbox specific
  **/
  input[type="checkbox"] {
    border-radius: var(--border-radius-sm);

    &:checked {
      background-color: var(--color-surface-action-solid);
      border-color: var(--color-surface-action-solid);
      background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" width="10.5" height="10.5" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 13l4 4L19 7"/></svg>');
    }
  }

  /**
    Radio specific
  **/
  input[type="radio"] {
    border-radius: var(--border-radius-round);
    display: flex;
    align-items: center;
    justify-content: center;

    &:checked::before {
      content: "";
      width: 6px;
      height: 6px;
      background-color: var(--color-neutral-white);
      border-radius: var(--border-radius-round);
    }

    &:disabled {
      background-color: var(--color-neutral-white);
      border-color: var(--color-border-disabled);

      &:checked::before {
        content: "";
        width: 6px;
        height: 6px;
        background-color: var(--color-surface-disabled-selected);
        border-radius: var(--border-radius-round);
      }
    }

    &:hover {
      background-color: initial;
    }
  }
}