.codeflow-panel {

    display: flex;
    flex-direction: column;
    min-height: 8rem;

    &--float {
        padding: 2rem;

        .codeflow-panel__title {
            height: 6rem;
            box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);

            position: relative;
            margin-top: -4rem;
        }
    }

    &__title {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        color: $color-text-strong;
        font-size: $font-size-lg;
        font-weight: 700;

        padding: $padding-sm;

        &--primary {
            background-color: $color-primary;
            color: $color-primary-invert;
        }

        &--secondary {
            background-color: $color-secondary;
            color: $color-secondary-invert;
        }

        &--danger {
            background-color: $color-danger;
            color: $color-danger-invert;
        }
    }

    &__body {
        flex: 1;

        &--padding {
            padding: $padding-sm;
        }
    }

    &__footer {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;

        padding: $padding-md;
        border-top: 1px solid #e9ecef;
    }
}