:root.dark {
  /*values for the showcase that I prefer*/
  --mer-color__old-neutral-gray--100: #525151;
  --mer-color__old-neutral-gray--300: #999999;
  --mer-color__old-neutral-gray--700: #333333;
  --mer-color__old-neutral-gray--800: #1a1a1a;
}
:root.light {
  /*values for the showcase that I prefer*/
  --mer-color__old-neutral-gray--100: #cccccc;
  --mer-color__old-neutral-gray--300: #696969;
  --mer-color__old-neutral-gray--700: #b3b3b3;
  --mer-color__old-neutral-gray--800: #cccccc;
}

:root {
  /*Sidebar*/
  --sc-sidebar__width: 250px;
  --sc-sidebar__font-size: var(--mer-font__size--xs);
  --sc-sidebar__color: var(--mer-color__neutral-gray--300);
  --sc-sidebar__bg-color: var(--mer-color__neutral-gray--800);
  --sc-sidebar__padding: var(--mer-spacing--lg);
  --sc-sidebar__border-color: var(--sc-base__border-color);

  /*Sidebar Header*/
  --sc-sidebar-header__padding-block: var(--sc-sidebar__padding);
  --sc-sidebar-header__padding-inline: var(--sc-sidebar__padding);
  --sc-sidebar-header__border-block-end: 1;

  /*Sidebar Nav*/
  --sc-sidebar-nav__padding-block: var(--sc-sidebar__padding);
  --sc-sidebar-nav__padding-inline: var(--sc-sidebar__padding);

  /*Sidebar List Child*/
  --sc-sidebar-list-child__margin-inline-start: var(--mer-spacing--sm);
}

/*====================
General
====================*/

body.showcase[data-sidebar] {
  display: grid;
  grid-template-columns: var(--sc-sidebar__width) 1fr; /* 250px for aside, rest for main */
  height: 100vh; /* Full viewport height */
  margin: 0;
}

/*====================
General
====================*/

.sidebar {
  background-color: var(--sc-sidebar__bg-color);
  color: var(--sc-sidebar__color);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow-y: auto;
}

/*====================
Header
====================*/

.sidebar__header,
.sidebar__footer {
  text-align: center;
  color: var(--mer-color__neutral-gray--300);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  font-family: var(--mer-font-family--inter-semi-bold);
}
.sidebar__header,
.sidebar__footer-link {
  padding-inline: var(--sc-sidebar-header__padding-inline);
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--sc-top-bar__height);
}
.sidebar__header {
  border-block-end: 1px solid var(--mer-surface__elevation--02);
}
.sidebar__footer {
  display: none;
  border-block-start: 1px solid var(--sc-sidebar__border-color);
}
.sidebar__footer-text--the-gold {
  color: var(--mer-color__message-yellow--100);
  filter: hue-rotate(361deg); /*fix the yellow difference*/
}
.sidebar__footer-text:nth-child(2) {
  display: none;
}
.sidebar__footer-link:hover .sidebar__footer-text:nth-child(2) {
  display: block;
}
.sidebar__footer-link:hover .sidebar__footer-text:nth-child(1) {
  display: none;
}

/*====================
Nav
====================*/

.sidebar__nav {
  padding-block: var(--sc-sidebar-nav__padding-block);
  padding-inline: var(--sc-sidebar-nav__padding-inline);
  font-size: var(--sc-sidebar__font-size);
  flex-grow: 1;
  overflow-y: auto;
}

/*====================
Section
====================*/

.sidebar__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar__section:not(:last-child) {
  padding-block-end: 16px;
  margin-block-end: 16px;
  border-block-end: 1px solid var(--mer-color__neutral-gray--700);
}

/* Title */
.sidebar__section-title {
  font-weight: var(--mer-font__weight--semi-bold);
  text-transform: capitalize;
  color: var(--mer-color__neutral-gray--200);
}

/*====================
List
====================*/

.sidebar__list > li > a {
  letter-spacing: 0.05em;
}

.sidebar__list > li {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 400;
}

.sidebar__list li {
  line-height: 1.6em;
}
.sidebar__list li:not(:last-child) {
}
.sidebar__list li a {
  position: relative;
  padding: 4px 0 4px 12px;
  display: block;
}
.sidebar__list li a:hover {
  color: var(--mer-color__neutral-gray--100);
}
.sidebar__list li a:hover::before {
  background-color: var(--mer-color__neutral-gray--100);
}
.sidebar__list li a:active {
  color: var(--mer-color__neutral-gray--400);
}
.sidebar__list li a:active::before {
  background-color: var(--mer-color__neutral-gray--400);
}
.sidebar__list li a::before {
  position: absolute;
  top: 50%;
  left: 0;
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  transform: translateY(-50%);

  background-color: var(--sc-base__border-color);
}
/* current page */
.sidebar__list li.current-page > a {
  pointer-events: none;
  color: var(--mer-accent__primary);
  font-weight: 600;
}
.sidebar__list li.current-page > a::before {
  background-color: var(--mer-accent__primary);
}
/*List Parent*/
.sidebar__list--parent {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
}
/*List Child*/
.sidebar__list--child {
  margin-inline-start: var(--sc-sidebar-list-child__margin-inline-start);
  position: relative;
  padding: 2px 0;
  text-transform: lowercase;
  letter-spacing: 0.5px;
  font-size: 12px;
}
.sidebar__list--child::before {
  content: "";
  height: calc(100% - 15px);
  width: 2px;
  position: absolute;
  left: calc(var(--sc-sidebar-list-child__margin-inline-start) * -1);
  top: 3%;
  border-left: 1px dashed var(--sc-sidebar__border-color);
}
/*List Child Section Divider */
.current-page__section-title {
  padding: 4px 0 2px 0;
  text-transform: capitalize;
  color: var(--mer-text__bright);
}
