/*
    Transitions between different segments of the website
    Transitions are intended as visual separators between sections of the
    website and may not have text on them.

    The .transition element is a container with a transparent background.
    It holds a slope element and a ::before pseudo-element injected via CSS.
    If you give a transition a color, it will be mapped to the background
    color of the slope and the preceding bar.
    The slope.svg also defines a decorative inner path.
    It inherits the fill color by default (i.e. is invisible) but can be
    customized by setting the fill-property of .fill-theme.
    Full example for a red transition with blue decoration:

    .transition {
        color: red;
        .fill_theme {
            fill: blue;
        }
    }
*/

@mixin transition_heights {
    @include respond-to-medium(height,      $transition-height);
    @include respond-to-medium(min-height,  $transition-min-height);
    @include respond-to-medium(max-height,  $transition-max-height);
}

.transition {
    @include transition_heights;

    display:            flex; /* (1) */
    font-size:          0;
    z-index:            100;
    overflow:           hidden;
    color:              inherit;
    background-color:   transparent;

    /* (1) Gets rid of pesky 1px lines that pop up occasionally */

    /* Create a pseudo-element that gets put before the slope svg */
    &::before {
        @include transition_heights;
        @include respond-to-medium(width, 55vw, 50vw, 45vw);

        content:            "";
        display:            inline;
        background-color:   currentColor;
        margin-right:       -1px; /* (2) */

        /* (2) Drag the following svg in by 1 px to avoid rendering artifacts */
    }
}

/* Used in the svg files that hold the transition paths */
.transition_slope {
    @include transition_heights;

    fill:   currentColor;
    width:  auto;
}