@import 'theme/variables.scss';

.transition {
    &-width {
        transition: width $transitionDuration250 $transitionTimingFunction;
        overflow-x: hidden;
    }

    &-transform {
        transition: transform $transitionDuration250 $transitionTimingFunction;

        &-100 {
            transition: transform $transitionDuration100
                $transitionTimingFunction;
        }

        &-400 {
            transition: transform $transitionDuration400
                $transitionTimingFunction;
        }
    }

    &-width-transform {
        transition-duration: $transitionDuration250;
        transition-timing-function: $transitionTimingFunction;
        transition-property: transform, width;
    }

    &-background {
        transition: background $transitionDuration200 $transitionTimingFunction;

        &-100 {
            transition: background $transitionDuration100
                $transitionTimingFunction;
        }

        &-color {
            &-300 {
                transition:
                    background,
                    color $transitionDuration300 $transitionTimingFunction;
            }
        }
    }

    &-fill {
        &-100 {
            svg {
                path {
                    transition: fill $transitionDuration100
                        $transitionTimingFunction;
                }
            }
        }
    }

    &-duration {
        &-250 {
            transition-duration: 250ms;
        }
    }
}