@import "variables.scss";

@mixin bordered-block {
    border: $standard-border;
    border-radius: .2rem;
}

@mixin below-container-width {
    @media screen and (max-width: $container-width-threshold) {
        @content;
    }
}

@mixin green-shadow {
    box-shadow: 0px 0px 5px rgba($primary-color, 0.7);
}

@mixin textual-input {
    @include bordered-block;
    box-sizing: border-box;
    @include var(background-color, background-color);
    @include var(color, text-color);
    font-family: $font-body;
    padding: $input-padding;

    &:active, &:focus {
        @include green-shadow;
        border-color: $primary-color;
    }

    flex-grow: 1;
}
