:host {
  display: flex;
  min-inline-size: var(--gse-ui-selectorCard-simple-minWidth);
  max-inline-size: var(--gse-ui-selectorCard-simple-maxWidth);
  min-block-size: var(--gse-ui-selectorCard-simple-minHeight);
  max-block-size: var(--gse-ui-selectorCard-simple-maxHeight);
}

:host([variant=descriptive]) {
  min-inline-size: var(--gse-ui-selectorCard-descriptive-minWidth);
  max-inline-size: var(--gse-ui-selectorCard-descriptive-maxWidth);
  min-block-size: var(--gse-ui-selectorCard-descriptive-minHeight);
  max-block-size: var(--gse-ui-selectorCard-descriptive-maxHeight);
}

::slotted(*) {
  cursor: pointer;
}

::slotted(gux-icon) {
  inline-size: var(--gse-ui-icon-medium-size);
  block-size: var(--gse-ui-icon-medium-size);
  color: var(--gse-ui-selectorCard-ilustrativeIcon-foregroundColor);
}

::slotted(label) {
  inline-size: 100%;
  font-family: var(--gse-ui-selectorCard-simple-label-fontFamily);
  font-size: var(--gse-ui-selectorCard-simple-label-fontSize);
  font-weight: var(--gse-ui-selectorCard-simple-label-fontWeight);
  line-height: var(--gse-ui-selectorCard-simple-label-lineHeight);
  color: var(--gse-ui-selectorCard-text-foregroundColor);
}

::slotted(input[type=radio]),
::slotted(input[type=checkbox]) {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  color: var(--gse-ui-radioButton-icon-default-unselectedForegroundColor);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  border: var(--gse-ui-selectorCard-unselected-border-width) var(--gse-ui-selectorCard-unselected-border-style) var(--gse-ui-selectorCard-unselected-border-color);
  border-radius: var(--gse-ui-selectorCard-simple-borderRadius);
}
::slotted(input[type=radio])::before,
::slotted(input[type=checkbox])::before {
  position: absolute;
  inset-block-start: var(--gse-ui-selectorCard-descriptive-text-gap);
  inset-inline-end: var(--gse-ui-selectorCard-descriptive-text-gap);
  display: inline-grid;
  grid-area: 1/1;
  inline-size: var(--gse-ui-radioButton-icon-width);
  block-size: var(--gse-ui-radioButton-icon-height);
  vertical-align: middle;
  color: var(--gse-ui-radioButton-icon-default-unselectedForegroundColor);
  text-align: center;
  content: "";
}

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

::slotted(input[type=radio]:checked),
::slotted(input[type=checkbox]:checked) {
  border: var(--gse-ui-selectorCard-selected-border-width) var(--gse-ui-selectorCard-selected-border-style) var(--gse-ui-selectorCard-selected-border-color);
}
::slotted(input[type=radio]:checked)::before,
::slotted(input[type=checkbox]:checked)::before {
  background-color: var(--gse-ui-selectorCard-default-selectedIndicator-selected-foregroundColor);
}

::slotted(input[type=radio]:not(:checked))::before,
::slotted(input[type=checkbox]:not(:checked))::before {
  background-color: var(--gse-ui-selectorCard-default-selectedIndicator-unselected-foregroundColor);
}

::slotted(input[type=radio]:disabled),
::slotted(input[type=checkbox]:disabled) {
  pointer-events: none;
  cursor: not-allowed;
  opacity: var(--gse-ui-radioButton-disabled-opacity);
}

::slotted(input[type=radio])::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' fill-rule='evenodd' clip-rule='evenodd' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' fill-rule='evenodd' clip-rule='evenodd' /%3E%3C/svg%3E");
}

::slotted(input[type=radio]:checked)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
}

::slotted(input[type=checkbox])::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%3E%3C/svg%3E");
}

::slotted(input[type=checkbox]:checked)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M2.28571 0C1.025 0 0 1.025 0 2.28571V13.7143C0 14.975 1.025 16 2.28571 16H13.7143C14.975 16 16 14.975 16 13.7143V2.28571C16 1.025 14.975 0 13.7143 0H2.28571ZM12.0357 6.32143L7.46429 10.8929C7.12857 11.2286 6.58571 11.2286 6.25357 10.8929L3.96786 8.60714C3.63214 8.27143 3.63214 7.72857 3.96786 7.39643C4.30357 7.06429 4.84643 7.06071 5.17857 7.39643L6.85714 9.075L10.8214 5.10714C11.1571 4.77143 11.7 4.77143 12.0321 5.10714C12.3643 5.44286 12.3679 5.98571 12.0321 6.31786L12.0357 6.32143Z' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M2.28571 0C1.025 0 0 1.025 0 2.28571V13.7143C0 14.975 1.025 16 2.28571 16H13.7143C14.975 16 16 14.975 16 13.7143V2.28571C16 1.025 14.975 0 13.7143 0H2.28571ZM12.0357 6.32143L7.46429 10.8929C7.12857 11.2286 6.58571 11.2286 6.25357 10.8929L3.96786 8.60714C3.63214 8.27143 3.63214 7.72857 3.96786 7.39643C4.30357 7.06429 4.84643 7.06071 5.17857 7.39643L6.85714 9.075L10.8214 5.10714C11.1571 4.77143 11.7 4.77143 12.0321 5.10714C12.3643 5.44286 12.3679 5.98571 12.0321 6.31786L12.0357 6.32143Z' /%3E%3C/svg%3E");
}

.gux-selector-card {
  display: flex;
  flex: 1 1 auto;
  inline-size: inherit;
}
.gux-selector-card .gux-content {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--gse-ui-selectorCard-descriptive-text-gap);
  align-items: center;
  inline-size: inherit;
  min-inline-size: var(--gse-ui-selectorCard-simple-minWidth);
  max-inline-size: var(--gse-ui-selectorCard-simple-maxWidth);
  min-block-size: var(--gse-ui-selectorCard-simple-minHeight);
  max-block-size: var(--gse-ui-selectorCard-simple-maxHeight);
  padding: var(--gse-ui-selectorCard-simple-padding);
  text-align: center;
  background-color: var(--gse-ui-selectorCard-default-backgroundColor);
  border-radius: var(--gse-ui-selectorCard-simple-borderRadius);
}
.gux-selector-card .gux-content .gux-label-container {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.gux-selector-card .gux-content .gux-icon {
  line-height: 0;
}
.gux-selector-card .gux-content:focus-within {
  outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
  outline-offset: var(--gse-semantic-focusOutline-offset);
}
.gux-selector-card.gux-descriptive .gux-content {
  align-items: flex-start;
  min-inline-size: var(--gse-ui-selectorCard-descriptive-minWidth);
  max-inline-size: var(--gse-ui-selectorCard-descriptive-maxWidth);
  min-block-size: var(--gse-ui-selectorCard-descriptive-minHeight);
  max-block-size: var(--gse-ui-selectorCard-descriptive-maxHeight);
  padding: var(--gse-ui-selectorCard-descriptive-padding);
  text-align: start;
  white-space: normal;
  border-radius: var(--gse-ui-selectorCard-descriptive-borderRadius);
}
.gux-selector-card.gux-descriptive .gux-content .gux-description-container {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.gux-selector-card.gux-descriptive .gux-content ::slotted(gux-badge) {
  margin-block-start: var(--gse-ui-selectorCard-descriptive-badge-marginTop);
}
.gux-selector-card.gux-descriptive .gux-content ::slotted(input[type=radio]),
.gux-selector-card.gux-descriptive .gux-content ::slotted(input[type=checkbox]) {
  inset-inline-start: 0;
  border-radius: var(--gse-ui-selectorCard-descriptive-borderRadius);
}
.gux-selector-card.gux-descriptive .gux-content ::slotted(input[type=radio])::before,
.gux-selector-card.gux-descriptive .gux-content ::slotted(input[type=checkbox])::before {
  inset-block-start: var(--gse-ui-selectorCard-descriptive-gap);
  inset-inline-end: var(--gse-ui-selectorCard-descriptive-padding);
  inline-size: var(--gse-ui-icon-small-size);
  block-size: var(--gse-ui-icon-small-size);
}
.gux-selector-card.gux-descriptive .gux-content ::slotted(label) {
  display: block;
  margin-block-end: var(--gse-ui-selectorCard-descriptive-text-gap);
  font-family: var(--gse-ui-selectorCard-descriptive-label-fontFamily);
  font-size: var(--gse-ui-selectorCard-descriptive-label-fontSize);
  font-weight: var(--gse-ui-selectorCard-descriptive-label-fontWeight);
  line-height: var(--gse-ui-selectorCard-descriptive-label-lineHeight);
}
.gux-selector-card.gux-descriptive .gux-content ::slotted(gux-icon) {
  inline-size: var(--gse-ui-icon-large-size);
  block-size: var(--gse-ui-icon-large-size);
  margin-block-end: var(--gse-ui-selectorCard-descriptive-gap);
}
.gux-selector-card.gux-disabled {
  pointer-events: none;
  cursor: not-allowed;
}
.gux-selector-card.gux-disabled .gux-content {
  pointer-events: none;
  -webkit-user-select: none; /* Safari */
  user-select: none;
  background-color: var(--gse-ui-selectorCard-disabled-backgroundColor);
  opacity: var(--gse-ui-selectorCard-disabled-opacity);
}
.gux-selector-card:hover:not(:disabled) .gux-content {
  cursor: pointer;
  background-color: var(--gse-ui-selectorCard-hover-backgroundColor);
}
.gux-selector-card:hover:not(:disabled) .gux-content ::slotted(input[type=radio])::before,
.gux-selector-card:hover:not(:disabled) .gux-content ::slotted(input[type=checkbox])::before {
  background-color: var(--gse-ui-selectorCard-hover-selectedIndicator-foregroundColor);
}
.gux-selector-card:active:not(:disabled) .gux-content {
  background-color: var(--gse-ui-selectorCard-active-backgroundColor);
}
.gux-selector-card:active:not(:disabled) .gux-content ::slotted(input[type=radio])::before,
.gux-selector-card:active:not(:disabled) .gux-content ::slotted(input[type=checkbox])::before {
  background-color: var(--gse-ui-selectorCard-active-selectedIndicator-foregroundColor);
}