/**
 * Drawer Styles
 * Drawer toggle button and more drawer menu
 */

/* ==========================================================================
   DRAWER TOGGLE BUTTON
   ========================================================================== */

.drawer-toggle {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--banner-height));
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 70px;
  height: 38px;
  padding-top: 8px;
  background: transparent;
  border: 3px solid var(--color-chulas-lime);
  border-top: none;
  border-radius: 0 0 4px 4px;
  cursor: pointer;
  z-index: 15;
  transition: all 0.2s ease;
}

/* Inner decorative border */
.drawer-toggle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 2px solid var(--color-chulas-lime);
  border-top: none;
  border-radius: 0 0 2px 2px;
  pointer-events: none;
}

/* Corner accents - bottom only */
.drawer-toggle::after {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -3px;
  height: 12px;
  pointer-events: none;
  background:
    /* Bottom left corner */
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) 0 calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) 8px calc(100% - 0px) / 3px 8px no-repeat,
    /* Bottom right corner */
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) calc(100% - 0px) calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) calc(100% - 8px) calc(100% - 0px) / 3px 8px no-repeat;
}

.drawer-toggle:active {
  transform: scale(0.97);
}

.drawer-handle {
  width: 28px;
  height: 3px;
  background: var(--color-chulas-lime);
  border-radius: 2px;
  position: relative;
  z-index: 1;
}

.drawer-chevron {
  width: 18px;
  height: 18px;
  fill: var(--color-chulas-lime);
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}

.drawer-toggle.open .drawer-chevron {
  transform: rotate(180deg);
}

/* ==========================================================================
   DRAWER TOGGLE COLOR VARIANTS
   ========================================================================== */

.drawer-toggle.lime {
  border-color: var(--color-chulas-lime);
}
.drawer-toggle.lime::before {
  border-color: var(--color-chulas-lime);
}
.drawer-toggle.lime::after {
  background:
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) 0 calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) 8px calc(100% - 0px) / 3px 8px no-repeat,
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) calc(100% - 0px) calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) calc(100% - 8px) calc(100% - 0px) / 3px 8px no-repeat;
}
.drawer-toggle.lime .drawer-handle {
  background: var(--color-chulas-lime);
}
.drawer-toggle.lime .drawer-chevron {
  fill: var(--color-chulas-lime);
}

.drawer-toggle.orange {
  border-color: var(--color-chulas-orange);
}
.drawer-toggle.orange::before {
  border-color: var(--color-chulas-orange);
}
.drawer-toggle.orange::after {
  background:
    linear-gradient(var(--color-chulas-orange), var(--color-chulas-orange)) 0 calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-orange), var(--color-chulas-orange)) 8px calc(100% - 0px) / 3px 8px no-repeat,
    linear-gradient(var(--color-chulas-orange), var(--color-chulas-orange)) calc(100% - 0px) calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-orange), var(--color-chulas-orange)) calc(100% - 8px) calc(100% - 0px) / 3px 8px no-repeat;
}
.drawer-toggle.orange .drawer-handle {
  background: var(--color-chulas-orange);
}
.drawer-toggle.orange .drawer-chevron {
  fill: var(--color-chulas-orange);
}

.drawer-toggle.purple {
  border-color: var(--color-chulas-purple);
}
.drawer-toggle.purple::before {
  border-color: var(--color-chulas-purple);
}
.drawer-toggle.purple::after {
  background:
    linear-gradient(var(--color-chulas-purple), var(--color-chulas-purple)) 0 calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-purple), var(--color-chulas-purple)) 8px calc(100% - 0px) / 3px 8px no-repeat,
    linear-gradient(var(--color-chulas-purple), var(--color-chulas-purple)) calc(100% - 0px) calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-purple), var(--color-chulas-purple)) calc(100% - 8px) calc(100% - 0px) / 3px 8px no-repeat;
}
.drawer-toggle.purple .drawer-handle {
  background: var(--color-chulas-purple);
}
.drawer-toggle.purple .drawer-chevron {
  fill: var(--color-chulas-purple);
}

.drawer-toggle.red {
  border-color: var(--color-chulas-red);
}
.drawer-toggle.red::before {
  border-color: var(--color-chulas-red);
}
.drawer-toggle.red::after {
  background:
    linear-gradient(var(--color-chulas-red), var(--color-chulas-red)) 0 calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-red), var(--color-chulas-red)) 8px calc(100% - 0px) / 3px 8px no-repeat,
    linear-gradient(var(--color-chulas-red), var(--color-chulas-red)) calc(100% - 0px) calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-red), var(--color-chulas-red)) calc(100% - 8px) calc(100% - 0px) / 3px 8px no-repeat;
}
.drawer-toggle.red .drawer-handle {
  background: var(--color-chulas-red);
}
.drawer-toggle.red .drawer-chevron {
  fill: var(--color-chulas-red);
}

.drawer-toggle.teal {
  border-color: var(--color-chulas-teal);
}
.drawer-toggle.teal::before {
  border-color: var(--color-chulas-teal);
}
.drawer-toggle.teal::after {
  background:
    linear-gradient(var(--color-chulas-teal), var(--color-chulas-teal)) 0 calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-teal), var(--color-chulas-teal)) 8px calc(100% - 0px) / 3px 8px no-repeat,
    linear-gradient(var(--color-chulas-teal), var(--color-chulas-teal)) calc(100% - 0px) calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-teal), var(--color-chulas-teal)) calc(100% - 8px) calc(100% - 0px) / 3px 8px no-repeat;
}
.drawer-toggle.teal .drawer-handle {
  background: var(--color-chulas-teal);
}
.drawer-toggle.teal .drawer-chevron {
  fill: var(--color-chulas-teal);
}

/* ==========================================================================
   MORE DRAWER MENU
   ========================================================================== */

.more-drawer {
  position: fixed;
  top: calc(var(--banner-height) + env(safe-area-inset-top, 0px) + 56px);
  left: 16px;
  right: 16px;
  background: var(--color-secondary-background);
  border-radius: 4px;
  border: 3px solid var(--color-chulas-lime);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  z-index: 100;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Inner decorative border */
.more-drawer::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 2px solid var(--color-chulas-lime);
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
}

/* Corner accents */
.more-drawer::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  pointer-events: none;
  z-index: -1;
  background:
    /* Top left corner */
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) 0 8px / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) 8px 0 / 3px 8px no-repeat,
    /* Top right corner */
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) calc(100% - 0px) 8px / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) calc(100% - 8px) 0 / 3px 8px no-repeat,
    /* Bottom left corner */
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) 0 calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) 8px calc(100% - 0px) / 3px 8px no-repeat,
    /* Bottom right corner */
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) calc(100% - 0px) calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) calc(100% - 8px) calc(100% - 0px) / 3px 8px no-repeat;
}

.more-drawer.open {
  max-height: 500px;
  opacity: 1;
  overflow: hidden;
}

/* Prevent scrolling/movement inside drawer */
.more-drawer,
.drawer-list,
.drawer-list-item {
  touch-action: manipulation;
  -webkit-overflow-scrolling: auto;
  overscroll-behavior: none;
}

/* Backdrop overlay */
.drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drawer-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   MORE DRAWER COLOR VARIANTS
   ========================================================================== */

.more-drawer.orange {
  border-color: var(--color-chulas-orange);
}
.more-drawer.orange::before {
  border-color: var(--color-chulas-orange);
}
.more-drawer.orange::after {
  background:
    linear-gradient(var(--color-chulas-orange), var(--color-chulas-orange)) 0 8px / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-orange), var(--color-chulas-orange)) 8px 0 / 3px 8px no-repeat,
    linear-gradient(var(--color-chulas-orange), var(--color-chulas-orange)) calc(100% - 0px) 8px / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-orange), var(--color-chulas-orange)) calc(100% - 8px) 0 / 3px 8px no-repeat,
    linear-gradient(var(--color-chulas-orange), var(--color-chulas-orange)) 0 calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-orange), var(--color-chulas-orange)) 8px calc(100% - 0px) / 3px 8px no-repeat,
    linear-gradient(var(--color-chulas-orange), var(--color-chulas-orange)) calc(100% - 0px) calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-orange), var(--color-chulas-orange)) calc(100% - 8px) calc(100% - 0px) / 3px 8px no-repeat;
}

.more-drawer.purple {
  border-color: var(--color-chulas-purple);
}
.more-drawer.purple::before {
  border-color: var(--color-chulas-purple);
}
.more-drawer.purple::after {
  background:
    linear-gradient(var(--color-chulas-purple), var(--color-chulas-purple)) 0 8px / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-purple), var(--color-chulas-purple)) 8px 0 / 3px 8px no-repeat,
    linear-gradient(var(--color-chulas-purple), var(--color-chulas-purple)) calc(100% - 0px) 8px / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-purple), var(--color-chulas-purple)) calc(100% - 8px) 0 / 3px 8px no-repeat,
    linear-gradient(var(--color-chulas-purple), var(--color-chulas-purple)) 0 calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-purple), var(--color-chulas-purple)) 8px calc(100% - 0px) / 3px 8px no-repeat,
    linear-gradient(var(--color-chulas-purple), var(--color-chulas-purple)) calc(100% - 0px) calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-purple), var(--color-chulas-purple)) calc(100% - 8px) calc(100% - 0px) / 3px 8px no-repeat;
}

.more-drawer.red {
  border-color: var(--color-chulas-red);
}
.more-drawer.red::before {
  border-color: var(--color-chulas-red);
}
.more-drawer.red::after {
  background:
    linear-gradient(var(--color-chulas-red), var(--color-chulas-red)) 0 8px / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-red), var(--color-chulas-red)) 8px 0 / 3px 8px no-repeat,
    linear-gradient(var(--color-chulas-red), var(--color-chulas-red)) calc(100% - 0px) 8px / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-red), var(--color-chulas-red)) calc(100% - 8px) 0 / 3px 8px no-repeat,
    linear-gradient(var(--color-chulas-red), var(--color-chulas-red)) 0 calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-red), var(--color-chulas-red)) 8px calc(100% - 0px) / 3px 8px no-repeat,
    linear-gradient(var(--color-chulas-red), var(--color-chulas-red)) calc(100% - 0px) calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-red), var(--color-chulas-red)) calc(100% - 8px) calc(100% - 0px) / 3px 8px no-repeat;
}

.more-drawer.teal {
  border-color: var(--color-chulas-teal);
}
.more-drawer.teal::before {
  border-color: var(--color-chulas-teal);
}
.more-drawer.teal::after {
  background:
    linear-gradient(var(--color-chulas-teal), var(--color-chulas-teal)) 0 8px / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-teal), var(--color-chulas-teal)) 8px 0 / 3px 8px no-repeat,
    linear-gradient(var(--color-chulas-teal), var(--color-chulas-teal)) calc(100% - 0px) 8px / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-teal), var(--color-chulas-teal)) calc(100% - 8px) 0 / 3px 8px no-repeat,
    linear-gradient(var(--color-chulas-teal), var(--color-chulas-teal)) 0 calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-teal), var(--color-chulas-teal)) 8px calc(100% - 0px) / 3px 8px no-repeat,
    linear-gradient(var(--color-chulas-teal), var(--color-chulas-teal)) calc(100% - 0px) calc(100% - 8px) / 8px 3px no-repeat,
    linear-gradient(var(--color-chulas-teal), var(--color-chulas-teal)) calc(100% - 8px) calc(100% - 0px) / 3px 8px no-repeat;
}

/* ==========================================================================
   DRAWER LIST ITEMS
   ========================================================================== */

.drawer-list {
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 16px;
}

.drawer-list-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* Inner decorative border */
.drawer-list-item::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  pointer-events: none;
}

.drawer-list-item:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   DRAWER LIST ITEM COLOR VARIANTS
   ========================================================================== */

.drawer-list-item.lime {
  border-color: var(--color-chulas-lime);
  background: rgba(214, 222, 35, 0.05);
}
.drawer-list-item.lime::before {
  border-color: var(--color-chulas-lime);
}
.drawer-list-item.lime::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  pointer-events: none;
  background:
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) 0 6px / 6px 2px no-repeat,
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) 6px 0 / 2px 6px no-repeat,
    radial-gradient(circle, var(--color-chulas-lime) 50%, transparent 50%) 0 0 / 4px 4px no-repeat,
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) calc(100%) 6px / 6px 2px no-repeat,
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) calc(100% - 6px) 0 / 2px 6px no-repeat,
    radial-gradient(circle, var(--color-chulas-lime) 50%, transparent 50%) calc(100%) 0 / 4px 4px no-repeat,
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) 0 calc(100% - 6px) / 6px 2px no-repeat,
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) 6px calc(100%) / 2px 6px no-repeat,
    radial-gradient(circle, var(--color-chulas-lime) 50%, transparent 50%) 0 calc(100%) / 4px 4px no-repeat,
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) calc(100%) calc(100% - 6px) / 6px 2px no-repeat,
    linear-gradient(var(--color-chulas-lime), var(--color-chulas-lime)) calc(100% - 6px) calc(100%) / 2px 6px no-repeat,
    radial-gradient(circle, var(--color-chulas-lime) 50%, transparent 50%) calc(100%) calc(100%) / 4px 4px no-repeat;
}

.drawer-list-item.orange {
  border-color: var(--color-chulas-orange);
  background: rgba(248, 160, 84, 0.05);
}
.drawer-list-item.orange::before {
  border-color: var(--color-chulas-orange);
}
.drawer-list-item.orange::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  pointer-events: none;
  background:
    linear-gradient(var(--color-chulas-orange), var(--color-chulas-orange)) 0 6px / 6px 2px no-repeat,
    linear-gradient(var(--color-chulas-orange), var(--color-chulas-orange)) 6px 0 / 2px 6px no-repeat,
    radial-gradient(circle, var(--color-chulas-orange) 50%, transparent 50%) 0 0 / 4px 4px no-repeat,
    linear-gradient(var(--color-chulas-orange), var(--color-chulas-orange)) calc(100%) 6px / 6px 2px no-repeat,
    linear-gradient(var(--color-chulas-orange), var(--color-chulas-orange)) calc(100% - 6px) 0 / 2px 6px no-repeat,
    radial-gradient(circle, var(--color-chulas-orange) 50%, transparent 50%) calc(100%) 0 / 4px 4px no-repeat,
    linear-gradient(var(--color-chulas-orange), var(--color-chulas-orange)) 0 calc(100% - 6px) / 6px 2px no-repeat,
    linear-gradient(var(--color-chulas-orange), var(--color-chulas-orange)) 6px calc(100%) / 2px 6px no-repeat,
    radial-gradient(circle, var(--color-chulas-orange) 50%, transparent 50%) 0 calc(100%) / 4px 4px no-repeat,
    linear-gradient(var(--color-chulas-orange), var(--color-chulas-orange)) calc(100%) calc(100% - 6px) / 6px 2px no-repeat,
    linear-gradient(var(--color-chulas-orange), var(--color-chulas-orange)) calc(100% - 6px) calc(100%) / 2px 6px no-repeat,
    radial-gradient(circle, var(--color-chulas-orange) 50%, transparent 50%) calc(100%) calc(100%) / 4px 4px no-repeat;
}

.drawer-list-item.teal {
  border-color: var(--color-chulas-teal);
  background: rgba(0, 178, 156, 0.05);
}
.drawer-list-item.teal::before {
  border-color: var(--color-chulas-teal);
}
.drawer-list-item.teal::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  pointer-events: none;
  background:
    linear-gradient(var(--color-chulas-teal), var(--color-chulas-teal)) 0 6px / 6px 2px no-repeat,
    linear-gradient(var(--color-chulas-teal), var(--color-chulas-teal)) 6px 0 / 2px 6px no-repeat,
    radial-gradient(circle, var(--color-chulas-teal) 50%, transparent 50%) 0 0 / 4px 4px no-repeat,
    linear-gradient(var(--color-chulas-teal), var(--color-chulas-teal)) calc(100%) 6px / 6px 2px no-repeat,
    linear-gradient(var(--color-chulas-teal), var(--color-chulas-teal)) calc(100% - 6px) 0 / 2px 6px no-repeat,
    radial-gradient(circle, var(--color-chulas-teal) 50%, transparent 50%) calc(100%) 0 / 4px 4px no-repeat,
    linear-gradient(var(--color-chulas-teal), var(--color-chulas-teal)) 0 calc(100% - 6px) / 6px 2px no-repeat,
    linear-gradient(var(--color-chulas-teal), var(--color-chulas-teal)) 6px calc(100%) / 2px 6px no-repeat,
    radial-gradient(circle, var(--color-chulas-teal) 50%, transparent 50%) 0 calc(100%) / 4px 4px no-repeat,
    linear-gradient(var(--color-chulas-teal), var(--color-chulas-teal)) calc(100%) calc(100% - 6px) / 6px 2px no-repeat,
    linear-gradient(var(--color-chulas-teal), var(--color-chulas-teal)) calc(100% - 6px) calc(100%) / 2px 6px no-repeat,
    radial-gradient(circle, var(--color-chulas-teal) 50%, transparent 50%) calc(100%) calc(100%) / 4px 4px no-repeat;
}

.drawer-list-item.red {
  border-color: var(--color-chulas-red);
  background: rgba(240, 89, 96, 0.05);
}
.drawer-list-item.red::before {
  border-color: var(--color-chulas-red);
}
.drawer-list-item.red::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  pointer-events: none;
  background:
    linear-gradient(var(--color-chulas-red), var(--color-chulas-red)) 0 6px / 6px 2px no-repeat,
    linear-gradient(var(--color-chulas-red), var(--color-chulas-red)) 6px 0 / 2px 6px no-repeat,
    radial-gradient(circle, var(--color-chulas-red) 50%, transparent 50%) 0 0 / 4px 4px no-repeat,
    linear-gradient(var(--color-chulas-red), var(--color-chulas-red)) calc(100%) 6px / 6px 2px no-repeat,
    linear-gradient(var(--color-chulas-red), var(--color-chulas-red)) calc(100% - 6px) 0 / 2px 6px no-repeat,
    radial-gradient(circle, var(--color-chulas-red) 50%, transparent 50%) calc(100%) 0 / 4px 4px no-repeat,
    linear-gradient(var(--color-chulas-red), var(--color-chulas-red)) 0 calc(100% - 6px) / 6px 2px no-repeat,
    linear-gradient(var(--color-chulas-red), var(--color-chulas-red)) 6px calc(100%) / 2px 6px no-repeat,
    radial-gradient(circle, var(--color-chulas-red) 50%, transparent 50%) 0 calc(100%) / 4px 4px no-repeat,
    linear-gradient(var(--color-chulas-red), var(--color-chulas-red)) calc(100%) calc(100% - 6px) / 6px 2px no-repeat,
    linear-gradient(var(--color-chulas-red), var(--color-chulas-red)) calc(100% - 6px) calc(100%) / 2px 6px no-repeat,
    radial-gradient(circle, var(--color-chulas-red) 50%, transparent 50%) calc(100%) calc(100%) / 4px 4px no-repeat;
}

.drawer-list-item.purple {
  border-color: var(--color-chulas-purple);
  background: rgba(112, 96, 169, 0.05);
}
.drawer-list-item.purple::before {
  border-color: var(--color-chulas-purple);
}
.drawer-list-item.purple::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  pointer-events: none;
  background:
    linear-gradient(var(--color-chulas-purple), var(--color-chulas-purple)) 0 6px / 6px 2px no-repeat,
    linear-gradient(var(--color-chulas-purple), var(--color-chulas-purple)) 6px 0 / 2px 6px no-repeat,
    radial-gradient(circle, var(--color-chulas-purple) 50%, transparent 50%) 0 0 / 4px 4px no-repeat,
    linear-gradient(var(--color-chulas-purple), var(--color-chulas-purple)) calc(100%) 6px / 6px 2px no-repeat,
    linear-gradient(var(--color-chulas-purple), var(--color-chulas-purple)) calc(100% - 6px) 0 / 2px 6px no-repeat,
    radial-gradient(circle, var(--color-chulas-purple) 50%, transparent 50%) calc(100%) 0 / 4px 4px no-repeat,
    linear-gradient(var(--color-chulas-purple), var(--color-chulas-purple)) 0 calc(100% - 6px) / 6px 2px no-repeat,
    linear-gradient(var(--color-chulas-purple), var(--color-chulas-purple)) 6px calc(100%) / 2px 6px no-repeat,
    radial-gradient(circle, var(--color-chulas-purple) 50%, transparent 50%) 0 calc(100%) / 4px 4px no-repeat,
    linear-gradient(var(--color-chulas-purple), var(--color-chulas-purple)) calc(100%) calc(100% - 6px) / 6px 2px no-repeat,
    linear-gradient(var(--color-chulas-purple), var(--color-chulas-purple)) calc(100% - 6px) calc(100%) / 2px 6px no-repeat,
    radial-gradient(circle, var(--color-chulas-purple) 50%, transparent 50%) calc(100%) calc(100%) / 4px 4px no-repeat;
}

/* ==========================================================================
   DRAWER LIST ICONS
   ========================================================================== */

.drawer-list-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
}

.drawer-list-icon svg {
  width: 18px;
  height: 18px;
}

.drawer-list-icon.lime {
  background: rgba(214, 222, 35, 0.15);
  color: var(--color-chulas-lime);
}

.drawer-list-icon.orange {
  background: rgba(248, 160, 84, 0.15);
  color: var(--color-chulas-orange);
}

.drawer-list-icon.teal {
  background: rgba(0, 178, 156, 0.15);
  color: var(--color-chulas-teal);
}

.drawer-list-icon.red {
  background: rgba(240, 89, 96, 0.15);
  color: var(--color-chulas-red);
}

.drawer-list-icon.purple {
  background: rgba(112, 96, 169, 0.15);
  color: var(--color-chulas-purple);
}

.drawer-list-label {
  flex: 1;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  text-align: left;
}

.drawer-list-chevron {
  font-size: 16px;
  color: rgba(250, 248, 245, 0.4);
}