@use "system/breakpoints";
@use "system/visibility";

$displays: "none" "block" "inline" "inline-block" "flex" "inline-flex";

@each $display in $displays {
  .ods-#{$display} {
    display: #{$display} !important;
  }

  @include breakpoints.medium {
    .ods-#{$display}-breakpoint-medium {
      display: #{$display} !important;
    }
  }

  @include breakpoints.large {
    .ods-#{$display}-breakpoint-large {
      display: #{$display} !important;
    }
  }
}

.ods-invisible {
  @extend %ods-invisible;
}

@include breakpoints.medium {
  .ods-invisible-breakpoint-medium {
    visibility: hidden !important;
  }
}

@include breakpoints.large {
  .ods-invisible-breakpoint-large {
    visibility: hidden !important;
  }
}

.ods-sr-only {
  @extend %ods-sr-only;
}