@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;
}