parsley/app/javascript/styles/_responsive_controls.scss

@use "bulma/sass/utilities" as bulma;
@use "bulma/sass/utilities/controls";
@use "bulma/sass/utilities/mixins";

@mixin responsive-label-size($size) {
  &.is-small-#{$size} {
    font-size: bulma.$size-small;
  }

  &.is-medium-#{$size} {
    font-size: bulma.$size-medium;
  }

  &.is-large-#{$size} {
    font-size: bulma.$size-large;
  }
}

@mixin responsive-control-size($size) {
  &.is-small-#{$size} {
    @include controls.control-small;
  }

  &.is-medium-#{$size} {
    @include controls.control-medium;
  }

  &.is-large-#{$size} {
    @include controls.control-large;
  }
}

.button {
  @include mixins.mobile {
    @include responsive-control-size("mobile");
  }

  @include mixins.tablet {
    @include responsive-control-size("tablet");
  }

  @include mixins.desktop {
    @include responsive-control-size("desktop");
  }

  @include mixins.widescreen {
    @include responsive-control-size("widescreen");
  }

  @include mixins.fullhd {
    @include responsive-control-size("fullhd");
  }
}

.label {
  @include mixins.mobile {
    @include responsive-label-size("mobile");
  }

  @include mixins.tablet {
    @include responsive-label-size("tablet");
  }

  @include mixins.desktop {
    @include responsive-label-size("desktop");
  }

  @include mixins.widescreen {
    @include responsive-label-size("widescreen");
  }

  @include mixins.fullhd {
    @include responsive-label-size("fullhd");
  }
}

.input, .textarea {
  @include mixins.mobile {
    @include responsive-control-size("mobile");
  }

  @include mixins.tablet {
    @include responsive-control-size("tablet");
  }

  @include mixins.desktop {
    @include responsive-control-size("desktop");
  }

  @include mixins.widescreen {
    @include responsive-control-size("widescreen");
  }

  @include mixins.fullhd {
    @include responsive-control-size("fullhd");
  }
}