////
/// @group Component:Panel
/// @author Mustard-UI@v1, Michael Becker
////

///
.panel {
    background: $panel-bg-color;
    border-radius: $base-border-radius;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    @if $panel-shadow {
        box-shadow: elevation('area');
    }
}

///
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: space(3) space(4) 0 space(4);
}

///
.panel-body {
    margin: space(2) space(4);
}

///
.panel-footer {
    margin: 0 space(4) space(4) space(4);
}

///
.panel.dense {
    ///
    .panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: space(2) space(2) 0 space(2);
    }

    ///
    .panel-body {
        margin: space(1) space(2);
    }

    ///
    .panel-footer {
        margin: 0 space(2) space(3) space(2);
    }
}


///
.panel[tabindex]:not([tabindex="-1"]),
button.panel,
a.panel {
    transition: 0.0926s transform linear;
    cursor: pointer;

    ///
    &:focus {
        // todo: maybe remove the `keyboard outline` reset with a good style
        outline: none;
    }

    ///
    &:hover,
    &:focus {
        transform: scale(1.013);
        opacity: 1;
        transition: 0.026s transform linear;
    }

    ///
    &:active {
        transform: scale(0.997);
        opacity: 1;
    }

}