.calculator__keypad {
    padding: var(--spacing-xxxl);
    background: var(--buttons-bg);
    border-radius: var(--border-radius-small) var(--border-radius-small) var(--border-radius-medium) var(--border-radius-medium);
}

/* Buttons */
.calculator__button {
    width: var(--btn-size);
    height: var(--btn-size);
    font-size: var(--font-size-md);
    font-weight: bold;
    color: var(--text-color);
    background: 0;
    border: 0;
    border-radius: var(--border-radius-big);
    transition: background-color .3s;
    font-family: var(--font), sans-serif;
}

.calculator__numbers > .calculator__button {
    background-color: var(--button-bg);
    border-radius: var(--border-radius-big);
    box-shadow: var(--shadow-soft);
}

.calculator__button:hover {
    background-color: var(--button-bg-hover);
    cursor: pointer;
}

.calculator__button:active {
    background-color: var(--button-bg);
}

.calculator__utilities,
.calculator__operators {
    background-color: var(--button-bg-section);
    border-radius: var(--border-radius-big);
    box-shadow: var(--shadow-soft);
    transition: background-color .3s;

}

.calculator__operators {
    max-width: var(--btn-size);
}

.calculator__button_equal {
    background-color: var(--button-bg-dark) !important;
}

.calculator__button_equal:hover {
    background-color: var(--button-bg) !important;
}

/* Toggle slider */
.theme-toggle__slider {
    position: absolute;
    z-index: 0;
    width: 55%;
    height: 100%;
    background-color: var(--moon-bg);
    border-radius: 999px;
    transition: transform 0.3s ease;
}

.calculator__icon img {
    width: 24px;
    opacity: 0.99;
    transition: opacity 0.3s ease;
}

html[data-theme="light"] .theme-toggle__slider {
    transform: translateX(-8%);
}

html[data-theme="dark"] .theme-toggle__slider {
    transform: translateX(82%);
}

html[data-theme="light"] .theme-toggle__icon--sun img,
html[data-theme="dark"] .theme-toggle__icon--moon img {
    opacity: 1;
}

.calculator__icon {
    z-index: 1;
    padding: var(--spacing-s) var(--spacing-m);
}