// Display Flex
@mixin display() {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

// Flex Wrap
@mixin flex-wrap( $args ) {
    -ms-flex-wrap: $args;
    -webkit-flex-wrap: $args;
    flex-wrap: $args;
}

// Align Items
@mixin align-items( $args ) {
    -webkit-align-items: $args;
    align-items: $args;
}

// Justify Content
@mixin justify-content( $args ) {
    -webkit-justify-content: $args;
    justify-content: $args;
}

// Box Shadow
@mixin box-shadow( $args ) {
    -webkit-box-shadow: $args;
    -moz-box-shadow: $args;
    box-shadow: $args;
}

// Transition
@mixin transition( $args ) {
    -webkit-transition: $args;
    -moz-transition: $args;
    -ms-transition: $args;
    -o-transition: $args;
    transition: $args;
}

#ocn-cookie-wrap {
    display: none;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    color: #777;
    font-size: 14px;
    z-index: 999999;

    &.flyin {
        left: 0;
        border-radius: 0 4px 0 0;
        padding: 30px;
        width: 350px;
        max-width: 100%;
        @include box-shadow( 0 20px 150px rgba(0,0,0,0.1) );

        .ocn-btn {
            margin-top: 20px;
        }
    }

    &.floating {
        padding: 8px 15px;
        width: 100%;
        @include box-shadow( 0 20px 100px rgba(0,0,0,0.1) );

        #ocn-cookie-inner {
            @include display();
            @include align-items( center );
            @include justify-content( space-between );
            width: 1100px;
            max-width: 100%;
            margin: 0 auto;
        }

        .ocn-btn {
            margin-left: 25px;
        }
    }

    .ocn-cookie-content {
        margin: 0;
    }

    .ocn-icon {
        position: absolute;
        top: 6px;
        right: 6px;
        height: 30px;
        width: 30px;
        line-height: 30px;
        text-align: center;

        svg {
            fill: #777;
            height: 15px;
            width: 15px;
            @include transition( all .3s ease );
        }

        &:hover svg {
            fill: #333;
        }
    }

    .ocn-btn {
        font-weight: 700;
    }
}

#ocn-cookie-overlay {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.6);
    z-index: 999998;
}

/* RTL */
body.rtl #ocn-cookie-wrap {
    &.flyin {
        right: 0;
        left: auto;
        border-radius: 0 0 0 4px;
    }

    &.floating .ocn-btn {
        margin-right: 25px;
        margin-left: 0;
    }

    .ocn-icon {
        left: 10px;
        right: auto;
    }
}

/* Responsive */
@media screen and (max-width: 959px) {
    #ocn-cookie-wrap.floating {
        text-align: center;

        #ocn-cookie-inner {
            @include flex-wrap( wrap );
            @include justify-content( center );
        }

        p {
            margin: 0 0 15px;
        }
    }
}