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


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


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

@accordion-title-margin-bottom:                 round((@global-margin / 1.5));
@accordion-title-padding-vertical:              round((@global-margin / 2.5));
@accordion-title-padding-horizontal:            round((@global-margin / 1.5));

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

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


// 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;
			padding: @global-margin @global-margin @global-margin 30px;
			color: @global-primary-background;
			border-color: darken(@accordion-title-background, 5%);
			margin: 20px 0 0;
			border-radius: @global-border-radius / 2;
			transition: @global-transition;

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

	        i.tm-toggle-button {
	            margin: 0 5px 0 20px;
	            font-style: normal;
	            font-family: @global-font-icon;
	            width: 26px;
	            height: 26px;
	            border-radius: @global-border-radius;
	            text-align:center;
	            position: relative;
	            margin-bottom: 10px;
			    transition: @global-transition;
	        }

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

	        i:before {
	            background-color: @global-primary-background;
	            content: "";
	            height: 1px;
	            width: 21px;
	            top: 11px;
	            left: 5px;
	        }

	        i:after {
	            background-color: @global-primary-background;
	            content: "";
	            height: 21px;
	            width: 1px;
	            top: 2px;
	            left: 15px;
	            opacity: 1;
	            transform: rotate(0deg);
	        }

	        &.uk-active i:before {
	            opacity:0;
	            background-color: @global-contrast-color;
	            transform: rotate(90deg);
	        }

	        &.uk-active i:after {
	        	background-color: @global-contrast-color;
				transform: rotate(90deg);
	        }
	    }

	    .uk-accordion-content {
	        padding: @global-grid-gutter 45px;
	        border: 1px solid darken(@accordion-title-background, 5%);
	        border-width: 0 1px 1px;
	        margin: 0;
	        border-radius: 0 0 @global-border-radius*1.5 @global-border-radius*1.5;

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

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