.root {
  position: relative;
  width: 100%;
  height: 100%;
}

.trigger {
  width: 100%;
  height: 100%;
  border: var(--btn-border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
  background-color: var(--color-accent);
  color: var(--color-surface);
  cursor: pointer;
  text-align: center;
  transition: background-color var(--btn-transition), color var(--btn-transition),
    transform var(--btn-transition);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-position: calc(100% - 12px) center;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.trigger:hover,
.trigger:focus-visible {
  background-color: var(--color-border);
  color: var(--color-text-light);
  outline: none;
}

.triggerDisabled,
.triggerDisabled:hover,
.triggerDisabled:focus-visible {
  background-color: #c7c7c7;
  color: #ffffff;
  cursor: not-allowed;
}

.menu {
  position: absolute;
  top: calc(100% + var(--spacing-sm));
  left: 0;
  right: 0;
  background-color: var(--color-surface);
  border: var(--btn-border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  z-index: 10;
  max-height: 260px;
  overflow-y: auto;
}

.option {
  width: 100%;
  border: var(--btn-border-width) solid transparent;
  border-radius: var(--radius-md);
  padding: 0.65rem;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  text-align: center;
  transition: background-color var(--btn-transition), color var(--btn-transition),
    border-color var(--btn-transition);
}

.option:hover,
.option:focus-visible {
  background-color: var(--color-accent);
  color: var(--color-text-light);
  outline: none;
}

.optionActive {
  border-color: var(--color-border);
  background-color: var(--color-accent);
  color: var(--color-text-light);
}