@ipohjs/css-mixins/src/css-mixins.module.css

CSS mixins for Qwik UI components in @ipohjs

%make-square {
  display: grid;
  position: relative;
  width: 100%;

  & > :first-child {
    aspect-ratio: 1 / 1;

    position: relative;
    display: grid;
  }
}

%make-component {
  @extend %reset-box-sizing;

  display: block;
  position: relative;
}

%make-grid {
  @extend %reset-box-sizing;

  display: grid;
  position: relative;
}

%reset {
  margin: 0;
  padding: 0;
  background: inherit;
  color: inherit;
  border: none;
  font: inherit;
  box-shadow: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgb(0 0 0 / 0);
}

%reset-box-sizing {
  box-sizing: border-box;
}

%reset-table {
  &,
  & thead,
  & tbody,
  & tfoot,
  & tr,
  & th,
  & td {
    position: relative;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
  }
}

%visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  user-select: none;
  width: 1px;
}