@use "breakpoints";

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

// Displays
@each $display in $displays {
  %ods-#{$display} {
    display: #{$display};
  }
}

@each $display in $displays {
  @include breakpoints.medium {
    %ods-#{$display}-breakpoint-medium {
      display: #{$display};
    }
  }
}

@each $display in $displays {
  @include breakpoints.large {
    %ods-#{$display}-breakpoint-large {
      display: #{$display};
    }
  }
}

// Visibility
%ods-invisible {
  visibility: hidden;
}

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

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

// Sr-only
%ods-sr-only {
  border: none !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 0.01em !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 0.01em !important;
}