@prefix: graphjs;

// Box
.@{prefix}-box.@{prefix}-root {
    position: relative;
    overflow: hidden;
    .border-radius(@border-radius-large);
    border: 1px;
    border-style: solid;
    // ThemeOption: border-color: fade(@default-color, 3%);
    border-color: transparent; // ThemeFix
    // ThemeOption: background-color: @background-color-shade;
    .box-shadow(e("0 0 15px 0 fade(black, 5%), 0 2px 1px 0px fade(black, 7.5%)"));
    &:hover, &:active, &:focus {
        .box-shadow(e("0 0 15px 0 fade(black, 5%), 0 2px 1px 0px fade(black, 7.5%)"));
    }
    .@{prefix}-header {
        // ThemeOption: background-color: @background-color-contrast;
    }
    .@{prefix}-content {
        overflow: hidden;
        padding: 2.5em;
    }
    input, input[type], textarea {
        // ThemeOption: background-color: @input-color;
    }
}

// Inline
.@{prefix}-inline.@{prefix}-root {
    position: relative;
    &.@{prefix}-promo-pad {
        padding-bottom: 3.6em;
    }
}

// Overflown
.@{prefix}-overflown.@{prefix}-root {
    overflow: visible;
    .@{prefix}-content {
        overflow: visible;
    }
}

// Header
.@{prefix}-header {
    position: relative;
    width: 100%;
    height: 3.5em;
    .medium-font;
    line-height: 3.5em;
    text-align: center;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: fade(black, 7.5%);
    .@{prefix}-title {
        position: absolute;
        top: 0;
        right: 2.5em;
        bottom: 0;
        left: 2.5em;
        width: auto;
        // ThemeOption: color: @primary-color;
        font-size: 1.2em;
        .single-line-text;
    }
    .@{prefix}-option {
        display: inline-block;
        width: 3.5em;
        height: 3.5em;
        text-align: center;
        // ThemeOption: .icon-color-states(@primary-color);
        &.@{prefix}-left {
            float: left;
        }
        &.@{prefix}-right {
            float: right;
        }
        svg {
            &.@{prefix}-new {
                .transform(rotate(45deg));
            }
            position: relative;
            top: -1px;
            width: 1.75em;
            height: 1.75em;
            vertical-align: middle;
            .transition(transform .35s ease);
            path {
                // ThemeOption: fill: @primary-color;
                .transition(fill .35s ease);
            }
        }
    }
    & + .@{prefix}-warning {
        border-bottom: none;
        margin-bottom: 1em;
        ul {
            &.@{prefix}-fail {
                background-color: @danger-color;
            }
            &.@{prefix}-success {
                background-color: @success-color;
            }
            li {
                color: white !important;
            }
        }
    }
}

// Content

.@{prefix}-content {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    p {
        margin: 0;
    }
}

// Warning

.@{prefix}-warning {
    display: inline-block;
    width: 100%;
    text-align: center;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    // ThemeOption: border-bottom-color: fade(@default-color, 15%);
    ul {
        list-style: none;
        width: 100%;
        margin: 0;
        padding: .75em 5%;
        &.@{prefix}-fail {
            color: @danger-color;
        }
        &.@{prefix}-success {
            color: @success-color;
        }
        li {
            margin-bottom: .25em;
            color: inherit;
            list-style: none;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

// Check

.@{prefix}-check {
    display: none;
    background-color: transparent;
    .transition(background-color .35s ease);
}

.@{prefix}-checked {
    .@{prefix}-check {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        // ThemeOption: background-color: @background-color-shade;
        .@{prefix}-checkmark {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 4em;
            height: 4em;
            margin-top: -2em;
            margin-left: -2em;
            border-radius: 50%;
            stroke: white;
            stroke-width: 2;
            stroke-miterlimit: 10;
            box-shadow: inset 0 0 0 @success-color;
            //.transform(translate(-50%, -50%));
            .animation(e("fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both"));
        }
        .@{prefix}-checkmark_circle {
            stroke-dasharray: 166;
            stroke-dashoffset: 166;
            stroke-width: 2;
            stroke-miterlimit: 10;
            stroke: @success-color;
            fill: none;
            .animation(stroke .6s cubic-bezier(.65, 0, .45, 1) forwards);
        }
        .@{prefix}-checkmark_check {
            transform-origin: 50% 50%;
            stroke-dasharray: 48;
            stroke-dashoffset: 48;
            .animation(stroke .3s cubic-bezier(.65, 0, .45, 1) .8s forwards);
        }
    }
    .@{prefix}-content {
        opacity: 0;
    }
    @keyframes stroke {
        100% {
            stroke-dashoffset: 0;
        }
    }
    @keyframes scale {
        0%, 100% {
            transform: none;
        }
        50% {
            transform: scale3d(1.1, 1.1, 1);
        }
    }
    @keyframes fill {
        100% {
            box-shadow: inset 0 0 0 2em @success-color;
        }
    }
}

// Responsive

/* Window Width < 480 */
@media only screen and (max-width: 479px) {
    .@{prefix}-box.@{prefix}-root {
        .@{prefix}-content {
            padding: 1.5em;
        }
    }
}

/* 480 â‰¤ Window Width < 768 */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .@{prefix}-box.@{prefix}-root {
        .@{prefix}-content {
            padding: 2em;
        }
    }
}