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

/*------------------------------------------------------------------
Accordion
-------------------------------------------------------------------*/
.oew-accordion {
    text-align: left;

    .oew-accordion-title {
        display: block;
        background-color: #13aff0;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        margin: 0;
        padding: 15px 20px;
        cursor: pointer;
        @include transition( all 300ms cubic-bezier(0, 0.49, 0.27, 0.99) );

        .oew-accordion-icon {
            display: inline-block;
            width: 1.5em;
            font-weight: 400;

            &.oew-accordion-icon-right {
                float: right;
                text-align: right;
            }

            &.oew-accordion-icon-left {
                float: left;
                text-align: left;
            }
        }
    }

    .oew-accordion-item {
        .oew-accordion-icon-closed {
            display: block;
        }

        .oew-accordion-icon-opened {
            display: none;
        }

        &.oew-active {
            .oew-accordion-icon-closed {
                display: none;
            }

            .oew-accordion-icon-opened {
                display: block;
            }
        }
    }

    .oew-accordion-content {
        display: none;
        padding: 15px 20px;

        > p:last-child {
            margin-bottom: 0;
        }
    }
}

/* RTL */
body.rtl {
    .oew-accordion {
        text-align: right;

        .oew-accordion-title .oew-accordion-icon {
            &.oew-accordion-icon-right {
                float: left;
                text-align: left;
            }

            &.oew-accordion-icon-left {
                float: right;
                text-align: right;
            }
        }
    }
}

/*------------------------------------------------------------------
Responsive
-------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
    .oew-accordion {
        .oew-accordion-title {
            padding: 12px 15px;

            .oew-accordion-icon {
                width: 1.2em;
            }
        }
        
        .oew-accordion-content {
            padding: 7px 15px;
        }
    }
}