/* prettier-ignore */
:host {
  position: relative;
  display: flex;
}

:host([type=checkbox]),
:host([type=radio]) {
  min-height: 32px;
  font-size: 0.9em;
}
:host([type=checkbox]) input,
:host([type=radio]) input {
  flex: 0 0 20px;
  margin: 6px 10px 6px 3px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--bce-con2-surface);
  background-color: var(--bce-c004-surface);
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
}
:host([type=checkbox]) label,
:host([type=radio]) label {
  display: inline-block;
  line-height: 32px;
  height: 100%;
}

:host([type=checkbox]) input {
  border-radius: 3px;
}

:host([type=checkbox][checked]) input {
  background-color: var(--bce-c500);
  border-color: var(--bce-c500);
}
:host([type=checkbox][checked]) bce-icon {
  position: absolute;
  color: var(--bce-con1);
  margin: 0 0 0 5px;
  line-height: 33px;
  font-size: 13px;
  pointer-events: none;
}

:host([type=dropdown]) {
  padding: 10px 14px;
  border-radius: 4px;
  cursor: pointer;
}
:host([type=dropdown]) input {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

:host([type=dropdown]:hover) {
  background-color: var(--bce-c400);
  color: var(--bce-con1);
}

:host([type=radio]) input {
  border-radius: 50%;
}

:host([type=radio][checked]) input {
  border-width: 2px;
  border-color: var(--bce-c500);
}
:host([type=radio][checked]) input:after {
  position: absolute;
  content: "";
  margin: 2px;
  width: 12px;
  height: 12px;
  line-height: 32px;
  background-color: var(--bce-c500);
  border-radius: 50%;
}