// ============================================================================
// Elements | Form | Toggle Panels
// ============================================================================

@use "../../../dev" as *;
@use "../../../variables" as *;

@use "../../soul_object" as *;

/// Base styling for a toggle panel container.
/// @group Form
@mixin toggle_panel {
    background: transparent;
    @include shadow--none;
    border-radius: 0;
    border: q(1) solid var(--color_state_muted);
}

/// Styles for the toggle panel title area.
/// @group Form
@mixin toggle_panel__title {
    font-size: q(12);
    padding-right: q(32);
    position: relative;
}

/// Float-end span inside the panel title.
/// @group Form
@mixin toggle_panel__title--float {
    position: absolute;
    right: 0;
    top: 0;
}

/// Styles for the toggle panel header.
/// @group Form
@mixin toggle_panel__heading {
    padding: q(16);
    background-color: transparent;
}

/// Styles for any icon within the panel heading.
/// @group Form
@mixin toggle_panel__heading__icon {
    font-size: q(12);
    color: var(--color_state_muted);
}

/// Styles for toggle panel spacing between siblings.
/// @group Form
@mixin toggle_panel__gap {
    margin-top: -q(1);
}

/// Styles for the panel body.
/// @group Form
@mixin toggle_panel__body {
    padding: q(25);
}