/* ==========================================================
   GRIDSHOCK 10-PRESET PICKER V15
   ========================================================== */

.gs-neon-presets {
  margin-top:
    20px;

  padding:
    20px;

  border:
    1px solid
    rgba(
      var(--gs-theme-primary-rgb),
      .22
    );

  background:
    color-mix(
      in srgb,
      var(--gs-theme-surface) 96%,
      var(--gs-theme-primary) 4%
    );
}


.gs-neon-presets-head {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    24px;

  padding-bottom:
    17px;

  margin-bottom:
    17px;

  border-bottom:
    1px solid
    rgba(
      var(--gs-theme-primary-rgb),
      .16
    );
}


.gs-neon-presets-head span {
  display:
    block;

  margin-bottom:
    6px;

  color:
    var(--gs-theme-primary);

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    .14em;
}


.gs-neon-presets-head h3 {
  margin:
    0;

  color:
    var(--gs-theme-text);

  font-size:
    18px;
}


.gs-neon-presets-head p {
  max-width:
    440px;

  margin:
    0;

  color:
    var(--gs-theme-muted);

  font-size:
    11px;

  line-height:
    1.6;
}


.gs-neon-preset-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  gap:
    10px;
}


.gs-neon-preset {
  min-width:
    0;

  padding:
    12px;

  text-align:
    left;

  cursor:
    pointer;

  color:
    var(--gs-theme-text);

  background:
    var(--gs-theme-surface-2);

  border:
    1px solid
    rgba(
      var(--gs-theme-primary-rgb),
      .14
    );

  transition:
    border-color .14s ease,
    transform .14s ease,
    box-shadow .14s ease,
    background-color .14s ease;
}


.gs-neon-preset:hover {
  transform:
    translateY(-1px);

  border-color:
    var(--preset-primary);

  box-shadow:
    0 0 18px
    color-mix(
      in srgb,
      var(--preset-primary) 14%,
      transparent
    );
}


.gs-neon-preset.is-selected {
  border-color:
    var(--preset-primary);

  background:
    color-mix(
      in srgb,
      var(--gs-theme-surface-2) 84%,
      var(--preset-primary) 16%
    );

  box-shadow:
    inset 0 -2px 0
      var(--preset-primary),
    0 0 20px
      color-mix(
        in srgb,
        var(--preset-primary) 12%,
        transparent
      );
}


.gs-neon-preset-preview {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    3px;

  height:
    34px;

  margin-bottom:
    10px;

  overflow:
    hidden;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--preset-primary) 35%,
      transparent
    );

  background-color:
    #050708;

  background-image:
    linear-gradient(
      color-mix(
        in srgb,
        var(--preset-grid) 18%,
        transparent
      ) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      color-mix(
        in srgb,
        var(--preset-grid) 18%,
        transparent
      ) 1px,
      transparent 1px
    );

  background-size:
    8px 8px;
}


.gs-neon-preset-preview::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    radial-gradient(
      circle at 80% 20%,
      color-mix(
        in srgb,
        var(--preset-primary) 35%,
        transparent
      ),
      transparent 58%
    );
}


.gs-neon-preset-preview i {
  position:
    relative;

  z-index:
    1;

  display:
    block;

  height:
    4px;

  margin:
    auto 6px;

  background:
    var(--preset-primary);

  box-shadow:
    0 0 8px
    var(--preset-primary);
}


.gs-neon-preset-preview i:nth-child(2) {
  background:
    var(--preset-secondary);

  box-shadow:
    0 0 8px
    var(--preset-secondary);
}


.gs-neon-preset-preview i:nth-child(3) {
  grid-column:
    1 / -1;

  width:
    58%;

  justify-self:
    center;

  background:
    linear-gradient(
      90deg,
      var(--preset-primary),
      var(--preset-secondary)
    );
}


.gs-neon-preset strong {
  display:
    block;

  margin-bottom:
    5px;

  color:
    var(--preset-primary);

  font-size:
    11px;
}


.gs-neon-preset small {
  display:
    block;

  min-height:
    34px;

  color:
    var(--gs-theme-muted);

  font-size:
    9px;

  line-height:
    1.45;
}


@media (
  max-width: 1050px
) {
  .gs-neon-preset-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }
}


@media (
  max-width: 700px
) {
  .gs-neon-presets-head {
    display:
      block;
  }

  .gs-neon-presets-head p {
    margin-top:
      10px;
  }

  .gs-neon-preset-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }
}


@media (
  max-width: 460px
) {
  .gs-neon-preset-grid {
    grid-template-columns:
      1fr;
  }
}