.#{$eccgui}-hovertoggler__wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    overflow: hidden;
}

.#{$eccgui}-hovertoggler--inline {
    display: inline-flex;
    width: auto;
}

.#{$eccgui}-hovertoggler {
    display: flex;
    flex-shrink: 0;
    align-items: stretch;
    justify-content: flex-start;
    width: 200%;

    .#{$eccgui}-hovertoggler--inline > & {
        display: inline-flex;
    }
}

.#{$eccgui}-hovertoggler__basecontent,
.#{$eccgui}-hovertoggler__hovercontent {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    order: 1;
    width: 50%;
    overflow: hidden;
}

.#{$eccgui}-hovertoggler__hovercontent {
    order: 2;

    .#{$eccgui}-hovertoggler:hover > &,
    &:focus-within {
        order: 0;
    }
}