.#{$prefix}paneltitle {
    display: flex;
    align-items: center;
    overflow: hidden;

    .#{$prefix}body-el {
        align-items: center;
        overflow: hidden;
        margin: auto;
        display: flex;
    }

    .#{$prefix}icon-el {
        flex-shrink: 0;
        margin: auto;
        display: none;
    }

    &.#{$prefix}has-icon .#{$prefix}icon-el {
        display: flex;
    }

    .#{$prefix}text-el {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    &.#{$prefix}icon-align-vertical {
        .#{$prefix}body-el {
            align-items: stretch;
        }

        .#{$prefix}text-el {
            flex-shrink: 0;
        }

        &.#{$prefix}vertical .#{$prefix}text-el {
            .#{$prefix}safari & {
                max-height: 100%;
            }
        }
    }

    &.#{$prefix}icon-align-right .#{$prefix}body-el {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }

    &.#{$prefix}vertical {
        flex-direction: column;

        .#{$prefix}text-el {
            -ms-writing-mode: tb-lr;
            -webkit-writing-mode: vertical-lr;
            writing-mode: vertical-lr;

            .#{$prefix}safari & {
                // Safari displays horizontal ellipsis even when text is vertically rotated.
                text-overflow: clip;
            }
        }
    }

    &.#{$prefix}horizontal {
        &.#{$prefix}text-align-left .#{$prefix}body-el {
            margin-left: 0;
        }

        &.#{$prefix}text-align-right .#{$prefix}body-el {
            margin-right: 0;
        }
    }

    &.#{$prefix}rotate-90 {
        .#{$prefix}body-el {
            flex-direction: column;
        }

        &.#{$prefix}icon-align-right .#{$prefix}body-el {
            flex-direction: column-reverse;
        }

        &.#{$prefix}rotate-icon .#{$prefix}icon-el:before {
            transform: rotate(90deg);
        }

        &.#{$prefix}text-align-left .#{$prefix}body-el {
            margin-top: 0;
        }

        &.#{$prefix}text-align-right .#{$prefix}body-el {
            margin-bottom: 0;
        }
    }

    &.#{$prefix}rotate-270 {
        .#{$prefix}body-el {
            flex-direction: column-reverse;
        }

        &.#{$prefix}icon-align-right .#{$prefix}body-el {
            flex-direction: column;
        }

        &.#{$prefix}rotate-icon .#{$prefix}icon-el:before {
            transform: rotate(270deg);
        }

        .#{$prefix}text-el {
            transform: rotate(180deg);
        }

        &.#{$prefix}text-align-left .#{$prefix}body-el {
            margin-bottom: 0;
        }

        &.#{$prefix}text-align-right .#{$prefix}body-el {
            margin-top: 0;
        }
    }

    &.#{$prefix}icon-align-top {
        .#{$prefix}body-el {
            flex-direction: column;
        }

        &.#{$prefix}rotate-90 .#{$prefix}body-el {
            flex-direction: row-reverse;
        }

        &.#{$prefix}rotate-270 .#{$prefix}body-el {
            flex-direction: row;
        }
    }

    &.#{$prefix}icon-align-bottom {
        .#{$prefix}body-el {
            flex-direction: column-reverse;
        }

        &.#{$prefix}rotate-90 .#{$prefix}body-el {
            flex-direction: row;
        }

        &.#{$prefix}rotate-270 .#{$prefix}body-el {
            flex-direction: row-reverse;
        }
    }
}