//
// Component: Modal
//
// ========================================================================


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

@modal-z-index:                                 (@global-z-index + 10);
@modal-background:								#1e242c;
@modal-dialog-padding:							40px;
@modal-dialog-background:                       @global-background;

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

.hook-modal() {

	&.uk-open {
        visibility: visible;
        transition-delay: 50ms;
        cursor: url(../../images/close.png), pointer;
        transition: @global-transition;

        > * {
            cursor: auto;
        }
    }
}


// Sub-object: `uk-modal-dialog`
// ========================================================================

.hook-modal-dialog() {
	border-radius: @global-border-radius;
}

.hook-modal-header() {
    padding: @panel-box-padding/2 @panel-box-padding;
    margin: -@panel-box-padding -@panel-box-padding @panel-box-padding/2 -@panel-box-padding;
    border-bottom: 1px solid darken(@panel-box-primary-background, 10%);
    border-radius: @global-border-radius @global-border-radius 0 0;
    background: @panel-box-primary-background;
    color: @panel-box-primary-color;
    font-family: @global-heading-font-family;
    font-weight: @global-heading-font-weight;
    font-size: @base-h3-font-size;
    line-height: @base-h3-line-height;
}


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

.hook-modal-misc() {

	.uk-modal-dialog {

		+ .uk-close {
			width: 30px;
			line-height: 30px;
			z-index: 10;
			position: absolute;
			top: 0;
			right: 0;
			border-radius: 0 0 0 30px;
			background-color: @global-dark-background;
			width: 80px;
			height: 80px;
			text-align: center;
			line-height: 80px;

			&:after {
				font-size: 24px;
				color:  @global-color;
				transition: @global-transition-color;
				opacity: 1;
			}

			&:hover {
				opacity: 1;

				&:after {
					color: @global-primary-background;
				}
			}
		}
	}

	.uk-modal-dialog-lightbox {

		> .uk-close:first-child {
			top: 0;
			right: -70px;
		}

		.uk-close:after {
			color: @global-contrast-color;
			font-size: 26px;
		}
	}

	.tm-modal-image {

		padding: 20px;

		> img {
			border: 1px solid @global-dark-15-shadow;
		}
	}

	.uk-modal-dialog.uk-modal-dialog-small {
		width: 350px;
	}
}