body[data-theme=dark] {
  --clr-background: hsl(222, 26%, 31%);
  --clr-keypad-bg: hsl(223, 31%, 20%);
  --clr-toggle-bg: var(--clr-keypad-bg);
  --clr-monitor-bg: hsl(224, 36%, 15%);
  --grd-monitor-bg: linear-gradient(to right, transparent 0%, rgba(255,255,255,.15) 100%);
  --clr-toggle: hsl(6, 63%, 50%);
  --clr-keys-bg: hsl(30, 25%, 89%);
  --clr-keys-shadow: hsl(28, 16%, 65%);
  --clr-selection: hsl(28, 16%, 65%, .5);
  --clr-delete-btn-bg: hsl(225, 21%, 49%);
  --clr-reset-btn-bg: var(--clr-delete-btn-bg);
  --clr-delete-btn-shadow: hsl(224, 28%, 35%);
  --clr-reset-btn-shadow: var(--clr-delete-btn-shadow);
  --clr-equal-btn-bg: var(--clr-toggle);
  --clr-equal-btn-shadow: hsl(6, 70%, 34%);
  --clr-toggle-focus: hsl(6, 70%, 51%, .7);
  --clr-title-text: white;
  --clr-key-text: hsl(221, 14%, 31%);
  --clr-theme-text: var(--clr-title-text);
  --clr-toggle-text: var(--clr-title-text);
  --clr-monitor-text: var(--clr-title-text);
  --clr-submonitor-text: hsl(0, 0%, 100%, .55);
  --clr-equal-btn-text: var(--clr-title-text);
}

body[data-theme=light] {
  --clr-background: hsl(0, 0%, 90%);
  --clr-keypad-bg: hsl(0, 5%, 81%);
  --clr-toggle-bg: var(--clr-keypad-bg);
  --clr-monitor-bg: hsl(0, 0%, 93%);
  --grd-monitor-bg: linear-gradient(to right, transparent 0%, rgba(255,255,255,.62) 100%);
  --clr-keys-bg: hsl(45, 7%, 89%);
  --clr-keys-shadow: hsl(35, 11%, 61%);
  --clr-selection: hsl(35, 11%, 61%, .5);
  --clr-delete-btn-bg: hsl(185, 42%, 37%);
  --clr-reset-btn-bg: var(--clr-delete-btn-bg);
  --clr-delete-btn-shadow: hsl(185, 58%, 25%);
  --clr-reset-btn-shadow: var(--clr-delete-btn-shadow);
  --clr-toggle: hsl(25, 98%, 40%);
  --clr-equal-btn-bg: var(--clr-toggle);
  --clr-equal-btn-shadow: hsl(25, 99%, 27%);
  --clr-toggle-focus: hsl(6, 70%, 51%, .7);
  --clr-key-text: hsl(60, 10%, 19%);
  --clr-title-text: var(--clr-key-text);
  --clr-theme-text: var(--clr-key-text);
  --clr-toggle-text: var(--clr-key-text);
  --clr-monitor-text: var(--clr-key-text);
  --clr-submonitor-text: hsl(60, 10%, 19%, .51);
  --clr-equal-btn-text: white;
}

body[data-theme=neon] {
  --clr-background: hsl(268, 75%, 9%);
  --clr-keypad-bg: hsl(268, 71%, 12%);
  --clr-toggle-bg: var(--clr-keypad-bg);
  --clr-monitor-bg: var(--clr-keypad-bg);
  --grd-monitor-bg: linear-gradient(to right, transparent 0%, rgba(255,255,255,.1) 100%);
  --clr-keys-bg: hsl(268, 47%, 21%);
  --clr-keys-shadow: hsl(290, 70%, 36%);
  --clr-selection: hsl(290, 70%, 36%, .5);
  --clr-delete-btn-bg: hsl(281, 89%, 26%);
  --clr-reset-btn-bg: var(--clr-delete-btn-bg);
  --clr-delete-btn-shadow: hsl(285, 91%, 52%);
  --clr-reset-btn-shadow: var(--clr-delete-btn-shadow);
  --clr-toggle: hsl(176, 100%, 44%);
  --clr-equal-btn-bg: hsl(176, 100%, 44%);
  --clr-equal-btn-shadow: hsl(177, 92%, 70%);
  --clr-toggle-focus: hsl(182, 25%, 50%);
  --clr-key-text: hsl(52, 100%, 62%);
  --clr-title-text: var(--clr-key-text);
  --clr-theme-text: var(--clr-key-text);
  --clr-toggle-text: var(--clr-key-text);
  --clr-monitor-text: var(--clr-key-text);
  --clr-submonitor-text: hsl(52, 100%, 62%, .51);
  --clr-equal-btn-text: hsl(198, 20%, 13%);
}

:root {
  --spacing: 20px;
  --history-icon-height: 3.75rem;
  --space-sidebar-left: 1.5rem;
}

*,
*::before,
*::after {
  margin: 0;
  box-sizing: border-box;
  text-rendering: optimizeSpeed;
  font-weight: 700;
  font-family: "Spartan", sans-serif;
  user-select: none;
}

::selection {
  background-color: var(--clr-selection);
}

body {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  font-size: 32px;
  background-color: var(--clr-background);
  transition: background-color 300ms;
}

button {
  cursor: pointer;
  border: none;
  outline: transparent;
}

.calculator {
  width: clamp(300px, 100%, 435px);
  padding: var(--spacing);
}

@media (prefers-reduced-motion: reduce) {
  *,
*::before,
*::after {
    transition: none !important;
  }
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 82px;
}

.noscript,
.error {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 10px;
  color: red;
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 0.7rem;
}

.error {
  display: none;
}

.title {
  font-size: 1em;
  color: var(--clr-title-text);
}

.theme-switch-container {
  display: flex;
  align-items: center;
}
.theme-switch-container .theme-text {
  font-size: 0.27em;
  margin-right: 17px;
  letter-spacing: 0.5px;
  height: 8px;
  color: var(--clr-theme-text);
  align-self: flex-end;
  transform: translateY(-71%);
}

.slider-container {
  display: flex;
  flex-direction: column;
  transition: all 0.4s;
}
.slider-container .slider {
  --slider-thumb: 12px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 10px;
  width: 50px;
  height: 19px;
  padding: 4px;
  background-color: var(--clr-toggle-bg);
  cursor: pointer;
}
.slider-container .slider:focus-visible {
  box-shadow: 0 0 0px 1.7px var(--clr-toggle-focus);
  outline: 2px solid transparent;
}
.slider-container .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--slider-thumb);
  height: var(--slider-thumb);
  border-radius: 50%;
  background: var(--clr-toggle);
  cursor: pointer;
  transition: filter 100ms;
}
.slider-container .slider::-webkit-slider-thumb:hover {
  filter: brightness(86%);
}
.slider-container .slider::-moz-range-thumb {
  width: var(--slider-thumb);
  height: var(--slider-thumb);
  border-radius: 50%;
  background: var(--clr-toggle);
  cursor: pointer;
  border: none;
  transition: filter 100ms;
}
.slider-container .slider::-moz-range-thumb:hover {
  filter: brightness(86%);
}
.slider-container .toggle-numbers {
  margin-bottom: 2.4px;
  font-size: 0.278em;
  color: var(--clr-toggle-text);
  display: flex;
  justify-content: space-around;
}

.display-container {
  width: 100%;
  margin-bottom: var(--spacing);
  padding-top: 1px;
  background-color: var(--clr-monitor-bg);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.display-container::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  background: var(--grd-monitor-bg);
  transform: translate(-100%) skewX(-25deg);
}
.display-container:hover::before {
  animation: shine 0.75s;
}
@keyframes shine {
  100% {
    transform: translate(380%) skewX(-25deg);
  }
}

.main-monitor,
.sub-monitor {
  width: inherit;
  text-align: right;
  background-color: inherit;
  user-select: text;
}

.sub-monitor {
  height: 0.9375rem;
  margin-top: 0.8125rem;
  padding-right: 0.8125rem;
  font-size: 0.44em;
  line-height: 20px;
  text-align-last: right;
  color: var(--clr-submonitor-text);
  overflow-x: auto;
  scrollbar-width: none;
}

.monitor-container {
  --monitor-padding: 0.8125rem;
  position: relative;
  width: 100%;
}

.main-monitor {
  height: 65px;
  padding-top: 1px;
  padding-inline: var(--monitor-padding);
  margin-bottom: -2px;
  font-size: 1.1em;
  color: var(--clr-monitor-text);
  border: none;
  outline: transparent;
}

.monitor-history-btn {
  position: absolute;
  inset: 0 auto 0 var(--monitor-padding);
  margin-bottom: 0.5625rem;
  padding-right: 0.75rem;
  background-color: transparent;
  background-image: linear-gradient(90deg, var(--clr-monitor-bg) 85%, #1820348c, transparent);
}
.monitor-history-btn svg {
  filter: brightness(75%);
  transition: filter 200ms ease-out;
}
.monitor-history-btn:hover svg {
  filter: brightness(95%);
}
.monitor-history-btn:focus-visible {
  outline: revert;
}

.sidebar-wrapper {
  --sidebar-width: clamp(14rem, 24vw, 18.7rem);
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background-color: #00000038;
}
.sidebar-backdrop.show {
  display: block;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  padding-block: var(--history-icon-height) 5.75rem;
  background-color: var(--clr-keypad-bg);
  width: var(--sidebar-width);
  overflow-y: auto;
  transform: translate(-100%);
  transition: transform 200ms ease-in;
}
.sidebar.slide-in {
  transform: none;
  transition-timing-function: ease-out;
}

.sidebar-topbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: fixed;
  inset: 0 auto auto 0;
  width: var(--sidebar-width);
  height: var(--history-icon-height);
  padding: 1rem var(--space-sidebar-left);
  background-color: var(--clr-keypad-bg);
}

.sidebar-history-btn {
  background: transparent;
}
.sidebar-history-btn svg {
  filter: brightness(75%);
  transition: filter 200ms ease-out;
}
.sidebar-history-btn:hover svg {
  filter: brightness(95%);
}
.sidebar-history-btn:focus-visible {
  outline: revert;
}

.sidebar-title {
  font-size: 1.3rem;
  color: var(--clr-title-text);
}

.history-list {
  padding: 0;
}
.history-list .history-item,
.history-list .no-history {
  color: var(--clr-submonitor-text);
  font-size: 1rem;
  list-style: none;
  padding: 1rem var(--space-sidebar-left);
}
.history-list .history-item {
  display: block;
  cursor: pointer;
  overflow-x: auto;
}
.history-list .history-item:hover {
  background-color: var(--clr-monitor-bg);
}

.history-delete-wrapper {
  display: flex;
  justify-content: center;
  position: fixed;
  inset: auto 0 0 0;
  width: var(--sidebar-width);
  background-color: var(--clr-keypad-bg);
}
.history-delete-wrapper .history-delete {
  --clr-key-text: var(--clr-equal-btn-text);
  --clr-keys-bg: var(--clr-equal-btn-bg);
  --clr-keys-shadow: var(--clr-equal-btn-shadow);
  padding-inline: 1rem;
  font-size: 1rem;
  text-align: center;
  padding: 0.1875rem 2.5rem;
  width: 100%;
  margin: 1.5rem var(--space-sidebar-left);
}

.history-icon {
  fill: var(--clr-title-text);
}

@media screen and (min-width: 950px) {
  .sidebar-backdrop {
    background: transparent;
    inset: auto;
  }
}
.key-pad {
  display: grid;
  place-content: center;
  grid-template-columns: repeat(4, minmax(55px, 75px));
  grid-auto-rows: 46px;
  column-gap: clamp(10px, 3vw, 20px);
  row-gap: clamp(13.9px, 3vw, 20px);
  width: 100%;
  padding: var(--spacing);
  background-color: var(--clr-keypad-bg);
  border-radius: 8px;
}

.btn {
  font-size: 0.75em;
  line-height: 38px;
  color: var(--clr-key-text);
  background-color: var(--clr-keys-bg);
  box-shadow: 0 3.1px 0 var(--clr-keys-shadow);
  border-radius: 6px;
  padding: 7px;
  transition: box-shadow 300ms linear, transform 300ms linear;
}
.btn:hover, .btn:focus-visible {
  box-shadow: 0 4.1px 0 var(--clr-keys-shadow);
  transform: translateY(-1px);
  transition: box-shadow 220ms, transform 220ms;
}
.btn:active {
  box-shadow: 0 0 0 var(--clr-keys-shadow);
  transform: translateY(3.1px);
  transition: transform 34ms, box-shadow 34ms;
}
.btn:focus-visible {
  outline: revert;
}

.btn-active {
  box-shadow: 0 0 0 var(--clr-keys-shadow);
  transform: translateY(3.1px);
  transition: transform 34ms, box-shadow 34ms;
}

.delete-btn {
  --clr-keys-bg: var(--clr-delete-btn-bg);
  --clr-keys-shadow: var(--clr-delete-btn-shadow);
  color: white;
  font-size: 0.5em;
}

.reset-btn, .equal-btn {
  --clr-keys-bg: var(--clr-reset-btn-bg);
  --clr-keys-shadow: var(--clr-reset-btn-shadow);
  color: white;
  grid-column: span 2;
  font-size: 0.5em;
}

.equal-btn {
  --clr-key-text: var(--clr-equal-btn-text);
  --clr-keys-bg: var(--clr-equal-btn-bg);
  --clr-keys-shadow: var(--clr-equal-btn-shadow);
  color: var(--clr-key-text);
}