﻿/* Стили для уведомлений */
.notification-div {
    margin-top: calc(var(--tg-content-safe-area-inset-top, 0px) + 2rem);
    display: flex;
    font-size: small;
    box-shadow: 0.25rem 0.25rem 0.3125rem #0000001c, -0.25rem -0.1875rem 0.125rem 0px #6b6b6b00;
    background-color: var(--block-color);
    color: var(--primary-color);
    border-radius: 1.125rem;
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    padding: 15px;
    font-size: 16px;
    width: fit-content;
    height: fit-content;
    /*    max-width: 60%;*/
    /*    max-height: 20%;*/
    word-wrap: break-word;
    overflow: hidden;
    opacity: 0;
    transition: top 0.5s ease-in-out, opacity 0.5s ease-in-out;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Стиль для текста уведомления */
.notification-text {
    font-size: smaller;
    text-align: center;
/*    max-width: 20%;*/
    font-weight: 500;
    font-size: 1rem;
}

/* Когда элемент появляется на экране */
.notification-div.show {
  top: 20px; /* Расположение уведомления после анимации */
  opacity: 1;
}
#notification-buttons {
    color: var(--muted-color);
    grid-row: 2;
    font-weight: 500;
    font-size:1rem;
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    width: 100%;
    justify-content: space-around;
    gap: 0.5rem;
}
#notification-accept-button {
    font-weight: 600;
    color: var(--primary-color);
    background: var(--border-color);
    padding: 0 0.5rem;
    border-radius: 0.35rem;
}
#notification-deny-button {
    font-weight: 600;
    background: var(--border-color);
    color: var(--muted-color);
    border-radius: 0.35rem;
    padding: 0 0.5rem;
}
