@charset "UTF-8";
/* =========================================================
o-parts -  style
============================================================*/

/* 通知
--------------------------------------------------------- */
.o-partsNotification {
    position: fixed;
    top: var(--gap02);
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;

    display: flex;
    align-items: center;
    gap: var(--gap01);
    padding: var(--gap01) var(--gap01);
    background-color: var(--base-color02);
    border-radius: var(--radius01);

    max-width: clamp(90%,5vw,600px);
    width: fit-content;
    box-shadow: 0 0 12px var(--shadow-color01);
    @media screen and (max-width:768px){ 
        padding: var(--gap01) var(--gap01);
    }

    &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        margin: auto;
        height: 2px;
        width: 100%;
    }
}
.o-partsNotification__title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.o-partsNotification {
    opacity: 0;
    /* //成功 */
    &.__succeed {
        background-color: #e6edf7;
        .o-partsNotification__title {
            &::before {
                content: "\e86c";
                font-family: var(--googleicon);
                color: var(--accent-color01);
            }
        }
        &::after {
            background-color: var(--accent-color01);
        }
    }

    /* 失敗 */
    &.__failed {
        background-color: #f7e8e5;
        .o-partsNotification__title {
            &::before {
                content: "\e000";
                font-family: var(--googleicon);
                color: var(--accent-color03);
            }
        }
        &::after {
            background-color: var(--accent-color03);
        }
    }
    /* アニメーション */
    &.__active {
        z-index: 10;
        animation-duration: 4s;
        animation-name: notificationShowHide01;
        animation-fill-mode:forwards;
        animation-timing-function: var(--timing02);
        &::after {
            animation-duration: 5s;
            animation-name: notificationBar01;
            animation-fill-mode:forwards;
            animation-timing-function: var(--timing02);
        }
    }
}