/* ==========================================================================
   Accordion shortcode start styles
   ========================================================================== */
.qodef-accordion-holder{
	position: relative;
    
    .qodef-accordion-content{
        margin: 0;
        padding: 1px 29px 26px;
        background-color: #fff;
        overflow: hidden;
    }
    .qodef-title-holder {
        cursor: pointer;
        position: relative;
        color: #fff;
        background-color: $default-heading-color;
        padding: 24px 62px 22px 28px;
        margin: 3px 0 0;
        box-sizing: border-box;
        font-size: 17px;
        font-weight: 700;
        @include qodefTransform(translateZ(0px));        
        @include qodefTransition(background-color 0.15s ease-out, color 0.15s ease-out);
        
        &:first-child{
            margin: 0;
        }
        
        .qodef-tab-title,
        .qodef-tab-title-inner{
            color: inherit;
            line-height: inherit;
        }
        
        .qodef-accordion-mark {
            position: absolute;
            top: 21px;
            right: 0;
            display: block;
            width: 63px;
            color: inherit;
            box-sizing: border-box;
            @include qodefTransition(background-color 0.15s ease-out);
        }
        
        .qodef-accordion-mark-icon {
            position: relative;
            display: block;
            width:100%;
            height: 100%;
            line-height:inherit;
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            @include qodefTransition(color 0.15s ease-out);
        }
        .qodef-accordion-mark-icon span{
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
            line-height:inherit;
            @include qodefTransition(opacity 0.15s ease-out);
        }
        .qodef-accordion-mark-icon .qodef-accordion-minus {
            opacity: 0;
        }
        .qodef-accordion-mark-icon .qodef-accordion-plus {
            opacity: 1;
        }
        
        
    }
    .qodef-title-holder.ui-state-active,
    .qodef-title-holder.ui-state-hover{
        color: $default-heading-color;
        background-color: #fff;
    }
    .qodef-title-holder.ui-state-active{
        
        .qodef-accordion-mark-icon .qodef-accordion-minus {
             opacity: 1;
        }
        .qodef-accordion-mark-icon .qodef-accordion-plus {
            opacity: 0;
        }
    }

    &.qodef-skin-dark {
        .qodef-title-holder {
            color: #fff;
            background-color: $default-heading-color;
        }
        .qodef-accordion-content{
            background-color: #f2f2f2;
        }
        .qodef-title-holder.ui-state-active,
        .qodef-title-holder.ui-state-hover{
            color: $default-heading-color;
            background-color: #f2f2f2;
        }
    }
}

.qodef-accordion-holder.qodef-initial{
    
    .qodef-title-holder .qodef-tab-title{
        padding: 0 60px 0 0;
        @include qodefTableLayout;
        box-sizing: border-box;
        text-align : left;
        
        span.qodef-tab-title-inner{
            position: relative;
            @include qodefTableCellLayout;
            text-align : left;
        }
    }
    
}