.button {
    display: inline-flex;
    align-items: center;

    font-size: var(--font-size-default);

    text-align: center;

    border-radius: var(--size-s);
    border: 1px solid var(--color-shadow);

    color: var(--color-text);
    background-color: var(--color-back);
    box-shadow: none;
    transition: box-shadow 200ms ease-in, background-color 200ms ease-in;

    outline: none;
    cursor: pointer;
}

.button:hover {
    border-color: rgba(0, 0, 0, 0);
    box-shadow: var(--shadow);
}

/* MODIFICATORS */

.disabled {
    pointer-events: none;
    color: var(--color-text-second);
}

/* SIZE */

.sizeDefault {
    padding: var(--size-s) var(--size-m);
}

.sizeSmall {
    padding: var(--size-xs) var(--size-s);
    font-size: var(--font-size-second);
}

/* THEME */

.themeGhost {
    border-color: rgba(0, 0, 0, 0);
}

.themeIcon {
    border-color: rgba(0, 0, 0, 0);
    padding: var(--size-xs) var(--size-xs);
}

/* DARK THEME */
@media (prefers-color-scheme: dark) {
    .button:hover {
        background-color: var(--color-back-active);
    }
}