:root {
  --edd-arrow-width: 11px;
}

.edd-root {
  position: relative;
}

.edd-value {
  border-bottom: 1px solid var(--color--primary);
  color: color-mix(in srgb, var(--color--primary), transparent 20%);
  cursor: pointer;
  font-family: var(--font-family--primary);
  font-size: var(--font-size--caption);
  font-weight: 400;
  height: 40px;
  padding: var(--gap--xxs) calc(var(--edd-arrow-width) + var(--gap--xs)) var(--gap--xxs) 0;
  text-wrap: nowrap;
  transition: border var(--transition-dur);
}

.edd-root-focused .edd-value {
  border-bottom: 1px solid var(--color--light-accent-1);
}

.edd-arrow {
  height: 8px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--edd-arrow-width);

  &::after {
    background-color: var(--color--dark-accent-2);
    content:'';
    display: block;
    height: 8px;
    mask-image: url('../../dist/public/icons/angle-down.svg');
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: var(--edd-arrow-width);
    position: relative;
    width: var(--edd-arrow-width);
  }
}

.edd-root:not(.edd-root-disabled) .edd-value,
.edd-option {
  cursor: pointer;
}

.edd-select {
  left: -1000%;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.edd-root-native .edd-select {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.edd-body {
  background-color: var(--color--light-neutral);
  left: 0;
  opacity: 0;
  overflow: hidden;
  padding: var(--gap-static--xxs) var(--gap-static--xs);
  pointer-events: none;
  position: absolute;
  right: 0;
  transform: scale(0.95);
  z-index: 999;
}

.edd-root-open .edd-body {
  opacity: 1;
  pointer-events: all;
  transform: scale(1);
  transition: opacity 200ms, transform 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.edd-root-open-below .edd-body,
.edd-root-open-above .edd-body {
  top: calc(100% + var(--gap-static--xxxxs));
}

.edd-items-list {
  max-height: 0;
  overflow: auto;
  transition: max-height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.edd-root-open-below .edd-value {
  border-bottom: 2px solid var(--color--dark-accent-2);
}

.edd-option {
  color: var(--color--primary);
  font-size: var(--font-size--caption);
  padding: var(--gap-static--xxxxs) 0;
  position: relative;
  transition: color var(--transition-dur), padding var(--transition-dur);
}

.edd-option::before {
  background-color: var(--color--light-accent-4);
  content:'';
  display: block;
  height: 14px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity var(--transition-dur);
  width: 2px;
}

.edd-option-selected {
  color: var(--color--primary);
  font-weight: 700;
  position: relative;
}

.edd-option-focused {
  color: var(--color--dark-accent-2);
}

.edd-option:last-child {
  padding-bottom: 0;
}

.edd-option:hover,
.edd-option:active {
  color: var(--color--dark-accent-2);
}

.edd-option:hover::before,
.edd-option:active::before {
  opacity: 1;
}