@import '../config/import';

.crayons-dropdown {
  position: absolute;
  display: none; // initially hidden
  padding: var(--su-2);
  min-width: 250px;
  z-index: var(--z-dropdown);
  background: var(--card-bg);
  color: var(--card-color);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--base-a10);
  border-radius: var(--radius);

  @media (min-width: $breakpoint-s) {
    max-width: 360px;
    width: max-content;
  }

  &.reverse {
    // Flips the dropdown to drop-upwards when set
    bottom: 100%;
    top: unset;
  }
}