/*!
 * 
 * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */
@import "../variables";
@import "../variables/hero_vars";
@import "../mixins";

.dlt-hero {
    @include component-vars(hero); //Mixin to define all the root variables
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    @include box-shadow($hero-elevation);
    padding: $hero-padding;
    background: $hero-color-background;
    border-radius: $hero-border-radii;
    position: relative;

    &--flat {
        @include box-shadow(none);
        background: $hero-color-background-dark;
    }

    &__content {
        margin: $hero-content-margin;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: self-start;
        height: auto;
        // flex: 1 1 auto;
        max-width: 70%;
        color: $hero-color-text;

        p {
            font-weight: $hero-font-weight;
            font-size: $hero-font-size;
            line-height: $hero-line-height;
        }

        h2,
        .xl {
            margin-bottom: 0;
            color: $hero-color-title;
        }

        [data-editable] {

            border: $hero-border-width-hover $hero-border-style transparent;
            margin-left: -2px;
            outline: 0;
            display: inline-block;
            line-height: 28px;

            span {
                display: none;
                color: $hero-color-primary;
                margin: 0 4px;
            }

            &:hover,
            &:focus {
                margin-left: 0;
                padding-left: 8px;
                border: $hero-border-width-hover $hero-border-style-hover $hero-color-primary;

                span {
                    display: inline-block;
                }
            }
        }

    }

    &__thumbnail {
        margin: $hero-thumbnail-margin;
        position: relative;
        width: $hero-thumbnail-size;
        height: $hero-thumbnail-size;
        overflow: hidden;
        flex: 0 0 auto;

        a {
            background: $hero-color-primary;
            color: $hero-color-text-inverse;
            display: inline-block;
            height: inherit;
            width: inherit;
            line-height: $hero-thumbnail-size;
            border-radius: $hero-thumbnail-radius;
            font-size: $hero-thumbnail-font-size;
            font-weight: $hero-font-weight;
            text-align: center;
            position: relative;
            overflow: hidden;

            &:hover,
            &:focus {
                text-decoration: none;
            }

            &:before {
                content: attr(data-edit);
                width: $hero-thumbnail-size;
                height: $hero-thumbnail-size;
                line-height: 76px;
                border-radius: $hero-thumbnail-radius;
                font-size: $hero-thumbnail-edit-font-size;
                color: $hero-color-primary;
                background: $hero-color-background;
                border: $hero-border-width-hover $hero-border-style-hover $hero-color-primary;
                @include transition($hero-transition-time $hero-transition-effect);

                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
            }

            &:hover:before,
            &:focus:before {
                opacity: 1;
            }

            &:active:before {
                opacity: 1;
                background: $hero-color-primary-light;
            }

            img {
                width: 100%;
                vertical-align: top;
            }
        }

    }

    &__actions {
        margin-bottom: 0;
        position: absolute;
        top: $hero-actions-position;
        right: $hero-actions-position;
    }

    &__content {
        p:last-child {
            margin-bottom: 0;
        }
    }

}