estima-control-component {
  --estima-control-width: 32px;
  --estima-control-height: 32px;
  --estima-control-padding: 0;
  --estima-control-border-radius: 2px;
  display: inline-block;
  margin: 0;
  padding: 0;
  border: transparent; }
  estima-control-component * {
    text-wrap: nowrap; }
  estima-control-component .estima-control-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: var(--estima-control-width);
    height: var(--estima-control-height);
    margin: 0;
    padding: var(--estima-control-padding);
    outline: none;
    border: none;
    text-decoration: none;
    border-radius: var(--estima-control-border-radius); }
  estima-control-component svg {
    width: var(--estima-control-height);
    height: var(--estima-control-height); }
  estima-control-component .colored-block {
    width: var(--estima-control-height);
    height: var(--estima-control-height);
    border: 1px solid color-mix(in srgb, var(--color-on-surface-main) 20%, transparent);
    border-radius: var(--estima-control-border-radius); }
  estima-control-component.disabled {
    opacity: .5;
    pointer-events: none; }
    estima-control-component.disabled input,
    estima-control-component.disabled label,
    estima-control-component.disabled input:hover,
    estima-control-component.disabled label:hover {
      cursor: not-allowed !important; }

estima-control-component:not([data-type="tag"], [data-type="switch"], [data-type="checkbox"])[data-text] {
  --estima-control-width: min-content;
  --estima-control-padding: 0 calc(var(--estima-control-height) * .4); }

estima-control-component[data-type="link"]:not([data-form="circle"], [data-form="square"])[data-text] {
  --estima-control-padding: 0; }

estima-control-component[data-type="control"] svg {
  width: calc(var(--estima-control-height) * .6);
  height: calc(var(--estima-control-height) * .6); }

estima-control-component[data-type="control"][disabled],
estima-control-component[data-type="control"]:disabled {
  opacity: .2; }
  estima-control-component[data-type="control"][disabled] > *,
  estima-control-component[data-type="control"]:disabled > * {
    cursor: not-allowed;
    pointer-events: none; }

estima-control-component[data-type="link"],
estima-control-component[data-type="switch"],
estima-control-component[data-type="checkbox"] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none; }
  estima-control-component[data-type="link"] .estima-control-wrapper:hover,
  estima-control-component[data-type="switch"] .estima-control-wrapper:hover,
  estima-control-component[data-type="checkbox"] .estima-control-wrapper:hover {
    cursor: pointer; }

estima-control-component[data-type="checkbox"] {
  --estima-control-width: 20px;
  --estima-control-height: 20px;
  --estima-control-padding: 0; }
  estima-control-component[data-type="checkbox"][data-text] {
    --estima-control-width: min-content; }
  estima-control-component[data-type="checkbox"] input {
    display: none; }
    estima-control-component[data-type="checkbox"] input ~ .estima-control-wrapper .icon-checkbox-full,
    estima-control-component[data-type="checkbox"] input ~ .estima-control-wrapper .icon-checkbox-half {
      display: none; }
    estima-control-component[data-type="checkbox"] input ~ .estima-control-wrapper .icon-checkbox-empty {
      display: inherit; }
    estima-control-component[data-type="checkbox"] input:checked ~ .estima-control-wrapper .icon-checkbox-full {
      display: inherit; }
    estima-control-component[data-type="checkbox"] input:checked ~ .estima-control-wrapper .icon-checkbox-half,
    estima-control-component[data-type="checkbox"] input:checked ~ .estima-control-wrapper .icon-checkbox-empty {
      display: none; }

estima-control-component[data-type="switch"] {
  --estima-control-width: 37px;
  --estima-control-height: 22px;
  --estima-control-padding: 0; }
  estima-control-component[data-type="switch"] svg {
    width: var(--estima-control-width); }
  estima-control-component[data-type="switch"] input {
    display: none; }
    estima-control-component[data-type="switch"] input ~ .estima-control-wrapper .icon-switch-on {
      display: none; }
    estima-control-component[data-type="switch"] input ~ .estima-control-wrapper .icon-switch-off {
      display: inherit; }
    estima-control-component[data-type="switch"] input:checked ~ .estima-control-wrapper .icon-switch-on {
      display: inherit; }
    estima-control-component[data-type="switch"] input:checked ~ .estima-control-wrapper .icon-switch-off {
      display: none; }

estima-control-component[data-type="tag"] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --estima-control-padding: 0 calc(var(--estima-control-height) * .2);
  --estima-control-width: auto; }
  estima-control-component[data-type="tag"] svg {
    width: calc(var(--estima-control-height) * .5);
    height: calc(var(--estima-control-height) * .5); }

estima-control-component[data-form="circle"] .estima-control-wrapper,
estima-control-component[data-form="square"] .estima-control-wrapper {
  overflow: hidden; }

estima-control-component[data-form="circle"]:not([data-type="control"], [data-type="switch"], [data-type="checkbox"]) {
  --estima-control-border-radius: calc(var(--estima-control-height) / 2); }
  estima-control-component[data-form="circle"] svg {
    width: calc(var(--estima-control-height) * .5);
    height: calc(var(--estima-control-height) * .5); }

estima-control-component[data-form="square"] svg {
  width: calc(var(--estima-control-height) * .5);
  height: calc(var(--estima-control-height) * .5); }

estima-control-component {
  --estima-control-bg-color: transparent;
  --estima-control-icon-stroke-color: var(--color-on-surface-main);
  --estima-control-icon-fill-color: none; }
  estima-control-component svg {
    fill: var(--estima-control-icon-fill-color);
    stroke: var(--estima-control-icon-stroke-color); }
  estima-control-component .estima-control-wrapper {
    background-color: var(--estima-control-bg-color);
    color: var(--estima-control-icon-stroke-color); }

estima-control-component[data-icon-color='white'] {
  --estima-control-icon-stroke-color: #fff; }

estima-control-component[data-type="link"] .estima-control-wrapper:hover {
  --estima-control-icon-stroke-color: var(--color-primary); }

estima-control-component[data-form="circle"],
estima-control-component[data-form="square"],
estima-control-component[data-type="tag"] {
  --estima-control-bg-color: var(--color-surface-middle);
  --estima-control-icon-stroke-color: var(--color-on-surface-main); }
  estima-control-component[data-form="circle"] .estima-control-wrapper:hover,
  estima-control-component[data-form="square"] .estima-control-wrapper:hover,
  estima-control-component[data-type="tag"] .estima-control-wrapper:hover {
    --estima-control-bg-color: var(--color-primary);
    --estima-control-icon-stroke-color: var(--color-on-primary); }
  estima-control-component[data-form="circle"][data-style="primary"],
  estima-control-component[data-form="square"][data-style="primary"],
  estima-control-component[data-type="tag"][data-style="primary"] {
    --estima-control-icon-stroke-color: var(--color-primary); }
    estima-control-component[data-form="circle"][data-style="primary"] .estima-control-wrapper:hover,
    estima-control-component[data-form="square"][data-style="primary"] .estima-control-wrapper:hover,
    estima-control-component[data-type="tag"][data-style="primary"] .estima-control-wrapper:hover {
      --estima-control-icon-stroke-color: var(--color-primary); }
  estima-control-component[data-form="circle"][data-style="secondary"],
  estima-control-component[data-form="square"][data-style="secondary"],
  estima-control-component[data-type="tag"][data-style="secondary"] {
    --estima-control-bg-color: var(--color-secondary);
    --estima-control-icon-stroke-color: var(--color-on-secondary); }
    estima-control-component[data-form="circle"][data-style="secondary"] .estima-control-wrapper:hover,
    estima-control-component[data-form="square"][data-style="secondary"] .estima-control-wrapper:hover,
    estima-control-component[data-type="tag"][data-style="secondary"] .estima-control-wrapper:hover {
      --estima-control-bg-color: var(--color-interaction-secondary-hover); }
  estima-control-component[data-form="circle"][data-style="lowest"],
  estima-control-component[data-form="square"][data-style="lowest"],
  estima-control-component[data-type="tag"][data-style="lowest"] {
    --estima-control-bg-color: var(--color-surface-lowest);
    --estima-control-icon-stroke-color: var(--color-on-surface-variant); }
    estima-control-component[data-form="circle"][data-style="lowest"] .estima-control-wrapper:hover,
    estima-control-component[data-form="square"][data-style="lowest"] .estima-control-wrapper:hover,
    estima-control-component[data-type="tag"][data-style="lowest"] .estima-control-wrapper:hover {
      --estima-control-bg-color: var(--color-secondary);
      --estima-control-icon-stroke-color: var(--color-on-secondary); }
  estima-control-component[data-form="circle"][data-style="variant"],
  estima-control-component[data-form="square"][data-style="variant"],
  estima-control-component[data-type="tag"][data-style="variant"] {
    --estima-control-bg-color: var(--color-on-surface-variant);
    --estima-control-icon-stroke-color: var(--color-surface-main); }
    estima-control-component[data-form="circle"][data-style="variant"] .estima-control-wrapper:hover,
    estima-control-component[data-form="square"][data-style="variant"] .estima-control-wrapper:hover,
    estima-control-component[data-type="tag"][data-style="variant"] .estima-control-wrapper:hover {
      --estima-control-bg-color: var(--color-interaction-variant-hover);
      --estima-control-icon-stroke-color: var(--color-surface-main); }

estima-control-component[data-type="control"] {
  --estima-control-bg-color: var(--color-surface-middle);
  --estima-control-icon-stroke-color: var(--color-on-surface-main); }
  estima-control-component[data-type="control"] .estima-control-wrapper:active {
    --estima-control-bg-color: var(--color-primary);
    --estima-control-icon-stroke-color: var(--color-on-primary); }
  estima-control-component[data-type="control"][data-style="lowest"] {
    --estima-control-bg-color: var(--color-surface-lowest);
    --estima-control-icon-stroke-color: var(--color-on-surface-variant); }
    estima-control-component[data-type="control"][data-style="lowest"] .estima-control-wrapper:active {
      --estima-control-bg-color: var(--color-secondary);
      --estima-control-icon-stroke-color: var(--color-on-secondary); }
  estima-control-component[data-type="control"][data-style="variant"] {
    --estima-control-bg-color: var(--color-on-surface-variant);
    --estima-control-icon-stroke-color: var(--color-surface-main); }
    estima-control-component[data-type="control"][data-style="variant"] .estima-control-wrapper:active {
      --estima-control-bg-color: var(--color-interaction-variant-hover);
      --estima-control-icon-stroke-color: var(--color-surface-main); }
  estima-control-component[data-type="control"][data-style="basket"] {
    --estima-control-bg-color: var(--color-surface-main);
    --estima-control-icon-stroke-color: var(--color-on-surface-main); }
    estima-control-component[data-type="control"][data-style="basket"] .estima-control-wrapper:hover,
    estima-control-component[data-type="control"][data-style="basket"] .estima-control-wrapper:active {
      --estima-control-bg-color: var(--color-on-surface-main);
      --estima-control-icon-stroke-color: var(--color-on-secondary); }

estima-control-component[data-type="tag"] {
  --estima-control-bg-color: var(--color-primary);
  --estima-control-icon-stroke-color: var(--color-on-primary);
  --estima-control-icon-fill-color: var(--color-on-primary); }

estima-control-component[data-type="switch"] {
  --estima-control-bg-color: transparent;
  --estima-control-icon-stroke-color: var(--color-on-surface-variant);
  --estima-control-icon-fill-color: var(--color-on-surface-variant); }
  estima-control-component[data-type="switch"] .icon-switch-on {
    --estima-control-icon-stroke-color: var(--color-primary);
    --estima-control-icon-fill-color: var(--color-primary); }
  estima-control-component[data-type="switch"] .icon-switch-off {
    --estima-control-icon-stroke-color: var(--color-on-surface-variant);
    --estima-control-icon-fill-color: var(--color-on-surface-variant); }

estima-control-component[data-type="checkbox"] {
  --estima-control-bg-color: transparent;
  --estima-control-icon-stroke-color: var(--color-on-surface-main);
  --estima-control-icon-fill-color: transparent; }
  estima-control-component[data-type="checkbox"] .icon-checkbox-half,
  estima-control-component[data-type="checkbox"] .icon-checkbox-full {
    --estima-control-icon-stroke-color: var(--color-secondary);
    --estima-control-icon-fill-color: var(--color-secondary); }