/*
 *  Copyright 2018 Adobe
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

@cmp-examples-demo-border-width: 1*@px;
@cmp-examples-demo-info-content-max-lines: 12;
@cmp-examples-demo-info-content-height: @cmp-examples-demo-info-content-max-lines * (@cmp-examples-font-size-code * @cmp-examples-line-height);
@cmp-examples-demo-tab-border-width: 2*@px;

.cmp-examples-demo {
    position: relative;
    margin: @cmp-examples-spacing-6 0 @cmp-examples-spacing-9;
    border: 1*@px solid @cmp-examples-color-gray-400;
    border-radius: @cmp-examples-border-radius;
    background-color: @cmp-examples-color-background;
}

.cmp-examples-demo__top {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180*@px;
    border-radius: @cmp-examples-border-radius;
    padding: @cmp-examples-spacing-4;

    @media @cmp-examples-screen-m-min {
        padding: @cmp-examples-spacing-6;
    }

    @media @cmp-examples-screen-l-min {
        padding: @cmp-examples-spacing-8;
    }
}

.cmp-examples-demo__component--widthFull {
    width: 100%;
}

.cmp-examples-demo__component--widthAuto {
    max-width: 100%;
}

.cmp-examples-demo__info {
    position: relative;
    display: none;

    .cmp-tabs__tablist {
        margin: 0;
        padding-left: 8*@px;
        border: @cmp-examples-demo-border-width solid @cmp-examples-color-gray-400;
        border-width: @cmp-examples-demo-border-width 0 0 0;
    }

    .cmp-tabs__tab {
        margin-bottom: -@cmp-examples-demo-border-width;
        border-bottom: @cmp-examples-demo-tab-border-width solid transparent;
        padding: @cmp-examples-spacing-3 @cmp-examples-spacing-4 10*@px @cmp-examples-spacing-4;

        font-size: @cmp-examples-font-size-s;
        line-height: 1.2;

        visibility: hidden;
        color: @cmp-examples-color-gray-800;

        &:hover,
        &--active {
            color: @cmp-examples-color-gray-900;
        }
    }

    @media @cmp-examples-screen-s-min {
        display: block;
    }

    @media @cmp-examples-screen-s-min {
        display: block;
    }
}

.cmp-examples-demo__info-actions {
    position: absolute;
    top: 0;
    right: @cmp-examples-spacing-1;
}

.cmp-examples-demo__info-content {
    width: auto;
    height: 0;
    margin: 0;
    border-bottom-left-radius: @cmp-examples-border-radius;
    border-bottom-right-radius: @cmp-examples-border-radius;

    overflow: auto;

    transition: ~'height @{cmp-examples-animation-duration-2} ease-in-out';
}

.cmp-examples-demo__properties {
    margin: 0;
    line-height: @cmp-examples-line-height;

    font-family: @cmp-examples-font-family-monospace;
    font-size: @cmp-examples-font-size-code;
    color: @cmp-examples-color-text-light;

    overflow: auto;
    white-space: nowrap;
    list-style-type: decimal;

    .cmp-examples-demo__property-title {
        padding-left: 1rem;
        color: @cmp-examples-color-blue-600;
    }

    .cmp-examples-demo__property-value {
        color: @cmp-examples-color-green-700;
    }

    .cmp-examples-demo__property-separator {
        color: @cmp-examples-color-text;
    }
}

.cmp-examples-demo__info--open {
    .cmp-examples-demo__info-content {
        height: @cmp-examples-demo-info-content-height;
    }

    .cmp-tabs__tablist {
        border-bottom-width: @cmp-examples-demo-border-width;
    }

    .cmp-tabs__tab {
        visibility: visible;

        &--active {
            border-color: @cmp-examples-color-gray-900;
        }
    }
}
