// Toggle Button
.toggle {
    position: relative;
    margin-top: 58px;
    background-color: rgba($color-secondary, 0.25);
    display: inline-flex;
    border-radius: 50vh;

    button, .pill {
        position: relative;
        z-index: 2;
        color: $color-secondary;
        border-radius: 50vh;
        padding: 12px 24px;
        font-family: $font-sans-sb;
        font-size: rem(18px);
        line-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: none;
        transition: color 150ms $ease-inout;
    }
    button {
        span {
            margin-left: 16px;
        }
        svg {
            fill: $color-secondary;
            * {
                transition: fill 150ms $ease-inout;
                transition-delay: 0ms;
            }
        }

        // Active button
        &.active {
            color: #fff;

            svg * {
                fill: #C78FEC;
            }
        }

        // Hover
        &:hover:not(.active) {
            color: $color-secondary-bright;

            svg {
                fill: $color-secondary-bright;
            }
        }
        // List icon
        &[data-layout="list"]:hover {
            rect:nth-of-type(even) {
                animation: layoutListEven 400ms $ease-cubic infinite alternate forwards;
            }
            rect:nth-of-type(odd) {
                animation: layoutListOdd 400ms $ease-cubic infinite alternate forwards;
            }
        }
        // Grid icon
        &[data-layout="grid"]:hover {
            rect:nth-of-type(even) {
                animation: layoutGridEven 400ms $ease-cubic infinite alternate forwards;
            }
            rect:nth-of-type(odd) {
                animation: layoutGridOdd 400ms $ease-cubic infinite alternate forwards;
            }
        }
    }

    // Pill (active)
    .pill {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: auto;
        height: 100%;
        background-color: $color-primary;
        transition: all 500ms $ease-quart;

        span {
            content: attr(data-text);
            display: block;
            margin: 0;
        }
    }
}