/**
 *
 * Rules
 *
 */
:host {
  --ezp-select-duration: var(--ezp-duration-3);
  display: block;
  height: var(--ezp-select-toggle-height);
  position: relative;
  transition: var(--ezp-select-transition, z-index 0s var(--ezp-select-duration));
  z-index: var(--ezp-select-zIndex, 3);
}
:host(:first-child) {
  --ezp-select-wrap-borderRadius: 3px 3px 0 0;
}

:host(:last-child) {
  --ezp-select-wrap-borderRadius: 0 0 3px 3px;
}

:host(:first-child:last-child) {
  --ezp-select-wrap-borderRadius: 3px;
}

:host(:not(:last-child):not(.is-expanded)) {
  --ezp-select-wrap-boxShadowPositionBottom: 0 0 0 0;
}

:host(.toggle-horizontal) {
  --ezp-select-label-alignSelf: start;
  --ezp-select-toggle-gridTemplateAreas: 'label value accessory';
  --ezp-select-toggle-gridTemplateColumns: 1fr repeat(2, auto);
  --ezp-select-toggle-height: 30px;
  --ezp-select-toggle-gridTemplateRows: auto;
  --ezp-select-value-alignSelf: end;
}

:host(.toggle-horizontal.has-icon) {
  --ezp-select-toggle-gridTemplateAreas: 'icon label value accessory';
  --ezp-select-toggle-gridTemplateColumns: auto 1fr repeat(2, auto);
}

:host(.toggle-vertical) {
  --ezp-select-label-alignSelf: center;
  --ezp-select-toggle-gridTemplateAreas: 'label accessory' 'value accessory';
  --ezp-select-toggle-gridTemplateColumns: 1fr auto;
  --ezp-select-toggle-height: 48px;
  --ezp-select-toggle-gridTemplateRows: repeat(2, auto);
  --ezp-select-value-alignSelf: center;
}

:host(.toggle-vertical.has-icon) {
  --ezp-select-toggle-gridTemplateAreas: 'icon label accessory' 'icon value accessory';
  --ezp-select-toggle-gridTemplateColumns: auto 1fr auto;
}

:host(.option-horizontal) {
  --ezp-select-details-gridTemplateColumns: repeat(2, 1fr);
  --ezp-select-details-gridTemplateRows: auto;
  --ezp-select-option-height: 30px;
}

:host(.option-vertical) {
  --ezp-select-details-gridTemplateColumns: 1fr;
  --ezp-select-details-gridTemplateRows: repeat(2, auto);
  --ezp-select-option-height: 48px;
}

:host(.is-expanded) {
  --ezp-select-accessory-color: var(--ezp-theme-solid);
  --ezp-select-transition: z-index 0s 0s;
  --ezp-select-zIndex: 9999;
  --ezp-select-icon-color: var(--ezp-theme-solid);
  --ezp-select-label-color: var(--ezp-theme-solid);
  --ezp-select-wrap-borderRadius: 3px;
}

:host(.disabled) {
  --ezp-select-accessory-color: var(--ezp-core-foreground-tertiary);
  --ezp-select-icon-color: var(--ezp-core-foreground-tertiary);
  --ezp-select-label-color: var(--ezp-core-foreground-tertiary);
  --ezp-select-toggle-background-hover: transparent;
  --ezp-select-toggle-cursor: default;
  --value-color: var(--ezp-core-foreground-tertiary);
}

#wrap {
  background: var(--ezp-core-surface-tertiary);
  border-radius: var(--ezp-select-wrap-borderRadius, 0);
  box-shadow: var(--ezp-select-wrap-boxShadowPositionTop, 0 -1px 0 0) var(--ezp-core-outline), var(--ezp-select-wrap-boxShadowPositionRight, 1px 0 0 0) var(--ezp-core-outline), var(--ezp-select-wrap-boxShadowPositionBottom, 0 1px 0 0) var(--ezp-core-outline), var(--ezp-select-wrap-boxShadowPositionLeft, -1px 0 0 0) var(--ezp-core-outline);
  transform: translateY(var(--ezp-select-wrap-translateY, 0));
  transition: transform var(--ezp-select-duration) var(--ezp-easing-out-quart), border-radius var(--ezp-select-duration) var(--ezp-easing-out-quart), box-shadow var(--ezp-select-duration) var(--ezp-easing-out-quart);
}

#toggle {
  background: var(--ezp-select-toggle-background, transparent);
  box-sizing: border-box;
  cursor: var(--ezp-select-toggle-cursor, pointer);
  display: grid;
  gap: var(--ezp-spacing-2) var(--ezp-spacing-3);
  grid-template-areas: var(--ezp-select-toggle-gridTemplateAreas, none);
  grid-template-columns: var(--ezp-select-toggle-gridTemplateColumns, none);
  grid-template-rows: var(--ezp-select-toggle-gridTemplateRows, auto);
  height: var(--ezp-select-toggle-height, auto);
  padding: var(--ezp-spacing-3);
}
#toggle:hover {
  --ezp-select-toggle-background: var(
    --ezp-select-toggle-background-hover,
    var(--ezp-core-shade-primary)
  );
}

#icon {
  align-self: center;
  color: var(--ezp-select-icon-color, var(--ezp-core-foreground-secondary));
  grid-area: icon;
  margin: calc(var(--ezp-spacing-2) * -1) 0;
}

#label {
  align-self: var(--ezp-select-label-alignSelf, auto);
  color: var(--ezp-select-label-color, var(--ezp-core-foreground-secondary));
  grid-area: label;
}

#value {
  align-self: var(--ezp-select-value-alignSelf, auto);
  color: var(--value-color, var(--ezp-core-foreground-primary));
  grid-area: value;
}

#accessory {
  align-self: center;
  color: var(--ezp-select-accessory-color, var(--ezp-core-foreground-secondary));
  grid-area: accessory;
  margin: calc(var(--ezp-spacing-2) * -1) 0;
}

#list {
  box-shadow: inset 0 1px 0 0 var(--ezp-core-outline);
  height: var(--ezp-select-list-height, 0);
  overflow: auto;
  transition: height var(--ezp-select-duration) var(--ezp-easing-out-quart);
}

.option {
  background: var(--ezp-select-option-background);
  box-sizing: border-box;
  cursor: pointer;
  display: grid;
  gap: var(--ezp-spacing-3);
  grid-template: auto/auto 1fr;
  height: var(--ezp-select-option-height, auto);
  padding: 0 0 0 var(--ezp-spacing-3);
}
.option:not(:last-child) {
  --ezp-select-details-boxShadow: inset 0 -1px 0 0 var(--ezp-core-outline);
}
.option:hover {
  --ezp-select-option-background: var(--ezp-core-shade-primary);
}
.option:active {
  --ezp-select-option-background: var(--ezp-core-shade-secondary);
}
.option.is-selected {
  --ezp-select-indicator-opacity: 1;
  --ezp-select-indicator-transform: translateX(0);
  --ezp-select-indicator-transition: opacity var(--ezp-select-duration)
      var(--ezp-easing-out-quart),
    transform var(--ezp-select-duration) var(--ezp-easing-out-quart), visibility 0s 0s;
  --ezp-select-indicator-visibility: visible;
}

.indicator {
  align-self: center;
  color: var(--ezp-theme-solid);
  margin: calc(var(--ezp-spacing-2) * -1) 0;
  opacity: var(--ezp-select-indicator-opacity, 0);
  transform: var(--ezp-select-indicator-transform, translateX(var(--ezp-spacing-3)));
  transition: var(--ezp-select-indicator-transition, opacity var(--ezp-select-duration) var(--ezp-easing-out-quart), transform var(--ezp-select-duration) var(--ezp-easing-out-quart), visibility 0s var(--ezp-select-duration));
  visibility: var(--ezp-select-indicator-visibility, hidden);
}

.details {
  box-shadow: var(--ezp-select-details-boxShadow);
  display: grid;
  gap: var(--ezp-spacing-2);
  grid-template-columns: var(--ezp-select-details-gridTemplateColumns, 1fr);
  grid-template-rows: var(--ezp-select-details-gridTemplateRows, auto);
  padding: var(--ezp-spacing-3) var(--ezp-spacing-3) var(--ezp-spacing-3) 0;
}

.title {
  align-self: start;
  color: var(--ezp-core-foreground-primary);
}

.meta {
  align-self: end;
  color: var(--ezp-core-foreground-secondary);
}