.component-modal {
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;

    background: var(--transparent-black);

    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.component-modal .modal-content {
    display: flex;
    flex-direction: column;
    gap: 16px;

    width: fit-content;
    height: fit-content;

    background: var(--on-backgroud-color);
    padding: 24px;
    border-radius: var(--primary-border-radius);
}

.component-modal .modal-content h3 {
    color: var(--accent-color);
    margin: 0;
}

.cancel-modal {
    padding: 8px 12px;
    border-radius: 8px;
    display: flex;
    background: var(--on-backgroud-color);
    border: var(--input-border-color) 1px solid;
    transition: all 0.3s;
    cursor: pointer;
}

.cancel-modal:hover {
    border: var(--accent-color) 1px solid;
}

.cancel-modal:hover p {
    color: var(--accent-color);
}

.confirm-modal {
    padding: 8px 12px;
    border-radius: 8px;
    display: flex;
    background: var(--accent-color);
    border: var(--accent-color) 1px solid;
    transition: all 0.3s;
    cursor: pointer;
}

.confirm-modal p  {
    color: var(--on-accent-text-color);
}

.confirm-modal:hover {
    background: var(--accent-hover-color);
}