//
// Component: Accordion
//
// ========================================================================


// Variables
// ========================================================================


@accordion-title-font-size:                     24px;
@accordion-title-line-height:                   26px;

@accordion-title-margin-bottom:                 0;
@accordion-title-padding-vertical:              25px;
@accordion-title-padding-horizontal:            @panel-box-padding;

@accordion-content-padding-horizontal:          @accordion-title-padding-horizontal;
@accordion-content-padding-bottom:              @accordion-title-padding-horizontal;

@accordion-title-background:                    @global-primary-light-background;
@accordion-title-active-background:				@global-primary-background;
@accordion-title-border-width:                  1px;
@accordion-title-border:                        @global-light-border;


// Component
// ========================================================================

.hook-accordion() {}


// Modifier: `uk-accordion-title`
// ========================================================================

.hook-accordion-title() {
  border: @accordion-title-border-width solid @accordion-title-border;
}


// Modifier: `uk-accordion-content`
// ========================================================================

.hook-accordion-content() {}


// Miscellaneous
// ========================================================================

.hook-accordion-misc() {

	.tm-accordion,
	.tm-toggle{
	    margin: 20px 0 10px;

	    .uk-accordion-title {
			background-color: @accordion-title-background;
			border-color: darken(@accordion-title-background, 5%);
			margin-top: @panel-box-padding;
			box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035);
			border-radius: @global-border-radius;
		    -webkit-transition: @global-transition;
		            transition: @global-transition;

			&.uk-active {
				border-radius: @global-border-radius @global-border-radius 0 0;
			    background-color: @accordion-title-active-background;
			    color: @global-contrast-color;
			    border-color: darken(@global-primary-background, 3%);
			    -webkit-transition: @global-transition;
		            	transition: @global-transition;
			}

	        i.tm-toggle-button {
	            margin: 0 5px 0 20px;
	            font-style: normal;
	            font-family: @global-font-icon;
	            color: @global-contrast-color;
	            background-color: darken(@global-primary-background, 3%);
	            width: 26px;
	            height: 26px;
	            border-radius: @global-border-radius;
	            text-align:center;
	            position: relative;
	            margin-bottom: 10px;
	            -webkit-box-shadow: 0px -1px 0 @global-darker-shadow, 0px 1px 0 @global-light-glow;
	            		box-shadow: 0px -1px 0 @global-darker-shadow, 0px 1px 0 @global-light-glow;
			    -webkit-transition: @global-transition;
			  			transition: @global-transition;
	        }

	        i:before,
	        i:after {
	        	content: "";
	        	position: absolute;
	        	-webkit-transition: @global-transition;
			  			transition: @global-transition;
			  	-webkit-transition-delay: 0.4s;
			  	    	transition-delay: 0.4s;
	        }

	        i:before {
	            background-color: @global-contrast-color;
	            content: "";
	            height: 3px;
	            width: 15px;
	            top: 11px;
	            left: 5px;
	        }

	        i:after {
	            background-color: @global-contrast-color;
	            content: "";
	            height: 15px;
	            width: 3px;
	            top: 5px;
	            left: 11px;
	            opacity: 1;
	            -webkit-transform: rotate(0deg);
  						transform: rotate(0deg);
	        }

	        &.uk-active i:before {
	            opacity:0;
	            -webkit-transform: rotate(90deg);
						transform: rotate(90deg);
	        }

	        &.uk-active i:after {
				-webkit-transform: rotate(90deg);
						transform: rotate(90deg);
	        }
	    }

	    .uk-accordion-content {
	        padding: @panel-box-padding;
	        border: 1px solid darken(@accordion-title-background, 5%);
	        border-width: 0 1px 1px;
	        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035);

	        code {
	            white-space: pre-wrap;
	            color: @base-pre-color;
	        }
	    }
	}

	.tm-toggle-code .uk-accordion-content {
	    background-color: @base-pre-background;
	}

}
