.hidden {
  display: none;
}

body {
  background-size: var(--unit--horizontal) var(--unit--vertical);
  background-image: linear-gradient(
      to right,
      var(--color-secondary--x-light) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      var(--color-secondary--light) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      var(--color-secondary--x-light) 1px,
      transparent 1px
    );
  background-position: 0 0, 0 0, 0 calc(var(--unit--vertical) / 2);
  background-attachment: fixed;
}

.left:not(.padding) {
  margin-left: calc(var(--unit--horizontal) * var(--left));
}
.padding.left {
  padding-left: calc(var(--unit--horizontal) * var(--left));
}
.top:not(.padding) {
  margin-top: calc(var(--unit--vertical) * var(--top));
}
.padding.top {
  padding-top: calc(var(--unit--vertical) * var(--top));
}
.right:not(.padding) {
  margin-right: calc(var(--unit--horizontal) * var(--right));
}
.padding.right {
  padding-right: calc(var(--unit--horizontal) * var(--right));
}
.bottom:not(.padding) {
  margin-bottom: calc(var(--unit--vertical) * var(--bottom));
}
.padding.bottom {
  padding-bottom: calc(var(--unit--vertical) * var(--bottom));
}

.full-width {
  width: 100%;
}

.width {
  width: calc(var(--unit--horizontal) * var(--width));
}

.flex {
  display: flex;
  justify-content: var(--content);
  align-items: var(--align);
  gap: calc(var(--gap) * var(--unit--horizontal));
}
.flex.column {
  flex-direction: column;
}

.light {
  opacity: var(--opacity-light);
}

/* ================= COLORS ================= */
.color {
  color: var(--color);
}
.opacity {
  opacity: var(--opacity);
}

/* ================= BUTTONS ================= */
.toggle-btn--left::after {
  margin-left: var(--unit--horizontal);
}
.toggle-btn--left::after {
  content: "+";
}
.toggle-btn--left.open::after {
  content: "-";
}
.toggle-btn--right::before {
  margin-right: var(--unit--horizontal);
}
.toggle-btn--right::before {
  content: "+";
}
.toggle-btn--right.open::before {
  content: "-";
}

.transition {
  transition: all 0.5s var(--curve-sine);
}