@use "../stylesheets/stylesheets.component";
@use "../stylesheets/stylesheets.component.animation" as animation;
@use "../../stylesheets/geometry" as geometry;

.toolbar-container {
    @media only screen and (width >= 1440px) {
        flex-flow: row;
    }

    font-size: 16px;
}

.members {
    flex-flow: row;
}

.toolbar-in {
    $count: 13;

    @for $i from 1 through $count {
        &:nth-child(#{$i}) {
            animation-delay: 50ms * $i;
        }
    }

    animation: toolbar-in animation.$transition;
    animation-fill-mode: both;

    &.reverse {
        animation-direction: reverse;
    }
}

$button-spacing: geometry.$button-width + geometry.$margin;

@keyframes toolbar-in {
    from {
        visibility: collapse;
        opacity: 0;
        transform: scale(0.1) translateX(calc( -1.0 * $button-spacing));
        width: 0;
    }

    to {
        visibility: visible;
        opacity: 1;
        width: auto;
    }
}