// Bootstrap callouts (from https://gist.github.com/matthiasg/6153853)

.callout {
    margin: 0 0 20px;
    padding: 15px;
    border-left: 5px solid $dark-gray;
    @include border-end-radius($alert-border-radius);
}

.callout-header {
    font-weight: bold;
    min-width: 20px;
}

.callout-icon {
    padding: 4px 5px 0 0;
}

.callout-content {
    max-height: 500px;
    max-width: 1300px;
    padding-top: 20px;
    overflow: hidden;
}

.callout-warning {
    background-color: $evap-light-yellow;
    border-color: $evap-yellow;
    color: shade-color($evap-yellow, 60%);
}

.callout-danger {
    background-color: $evap-light-red;
    border-color: $evap-red;
    color: shade-color($evap-red, 60%);
}

.callout-info {
    background-color: $evap-light-blue;
    border-color: $evap-dark-blue;
    color: shade-color($evap-dark-blue, 60%);

    .callout-header {
        color: $evap-dark-blue;
    }

    &.closed:hover,
    &.closed:active {
        background-color: shade-color($evap-light-blue, 20%);
    }
}

// this has to be used in combination with infobox.ts
.callout-infobox {
    display: inline-block;
    min-width: 100%;
    transition: background-color 0.15s ease-in-out;

    &.closed:hover,
    &.closed:active {
        cursor: pointer;
    }

    &.closing,
    &.closed {
        border-radius: .2rem;
        border-left-width: 0;
        padding: 4px 8px 4px 8px;
        min-width: 0;

        .callout-content {
            max-height: 0;
            max-width: 0;
            padding-top: 0;
        }

        .callout-infobox-close {
            display: none;
        }
    }

    &.closing {
        transition: border-radius 1s ease 1s, border-left-width 1s ease 1s, padding 1s ease-in-out, min-width 1s ease 1s;

        .callout-content {
            transition: max-width 1s ease 1s, padding-top 1s ease, max-height 1s ease;
        }
    }

    &.opening {
        transition: border-radius 1s ease, border-left-width 1s ease, padding 1s ease-in-out, min-width 1s ease;

        .callout-content {
            transition: max-width 1s ease, padding-top 1s ease 1s, max-height 1s ease 1s;
        }
    }
}
