.bbd-variant-picker__legend {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

.bbd-variant-picker__legend-label {
  flex-shrink: 0;
}

.bbd-variant-picker__button {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  color: var(--color-primary);
  text-decoration: underline;
  transition: color 0.2s ease-in-out;

  .svg-wrapper {
    rotate: 45deg;
    translate: 0 2px;

    > svg {
      fill: currentColor;
    }
  }

  &:hover,
  &:focus {
    color: var(--color-primary-hover);
  }
}

.bbd-variant-picker__caption {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  margin-block-start: var(--margin-xs);
  font-weight: 400;
  font-size: var(--font-size--sm);
}