$default-left: 50%;
$default-top: 10%;

.codeflow-overlay {
    background-color: rgba(000, 000, 000, 0.65);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    &--hide {
        background-color: transparent;
    }
}

.codeflow-modal {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: $color-background;
    position: absolute;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 45px, rgba(0, 0, 0, 0.22) 0px 10px 18px;
    border-radius: 2px;
    border-color: transparent;

    animation: slideDownCenter .5s  cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;

    &__panel {
        width: 100%;
        height: 100%;
    }

    &:focus {
        outline: none;
    }

    &__title {
        display: flex;
        align-items: center;
        flex: 1;
    }

    &__title-close-button {
        font-size: 1.5rem;
    }

    &__title-icon {
        margin-right: 0.8rem;
    }

    &__title-box {
        display: flex;
        flex-direction: row;
        flex: 1;
        align-items: center;
    }

    &__body {
        color: $color-text;
        height: 100%;
        width: 100%;
    }

    &--default {
        left: $default-left;
        // top: 200px;
        transform: translateX(-50%);
    }

    &--center {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    &--top {
        top: 0;
        left: 0;
        width: 100%;
        animation: slideDown .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
    }

    &--right {
        right: 0;
        top: 0;
        height: 100%;
        animation: slideLeft .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
    }

    &--bottom {
        bottom: 0;
        left: 0;
        width: 100%;
        animation: slideUp .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
    }
    
    &--left {
        left: 0;
        top: 0;
        height: 100%;
        animation: slideRight .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
    }

    
    @keyframes slideLeft {
        0% {
            transform:translateX(100%);
        }
        100% {
            transform:translateX(0%);
        }
    }

    @keyframes slideRight {
        0% {
            transform:translateX(-100%);
        }
        100% {
            transform:translateX(0%);
        }
    }

    @keyframes slideUp {
        0% {
            transform:translateY(100%);
        }
        100% {
            transform:translateY(0%);
        }
    }

    @keyframes slideDown {
        0% {
            transform:translateY(-100%);
        }
        100% {
            transform:translateY(0%);
        }
    }

    @keyframes slideDownCenter {
        0% {
            top: 0;
            transform:translate(-50%, -100%);
        }
        100% {
            top: $default-top;
            transform:translate(-50%, 0);
        }
    }
}