@use './mixins/_media-queries';

.center-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
}

.align-right {
  text-align: right;
}

.mw {
  max-width: var(--component-max-width);
  margin: auto;
}

[hidden] {
  visibility: hidden;
}

.hide-xs {
  @include media-queries.mq(xs, max) {
    display: none !important;
  }
}

.hide-xxs {
  @include media-queries.mq(xxs, max) {
    display: none !important;
  }
}

.hide-xxxs {
  @include media-queries.mq(xxxs, max) {
    display: none !important;
  }
}

.show-only-on-touch-primary {
  .isMousePrimary & {
    display: none !important;
  }
}

.show-only-on-mouse-primary {
  .isTouchPrimary & {
    display: none !important;
  }
}

.show-only-on-touch-only {
  .isNoTouchOnly & {
    display: none !important;
  }
}

.show-only-on-no-touch-only {
  .isTouchOnly & {
    display: none !important;
  }
}

.show-xs-only {
  @include media-queries.mq(xs) {
    display: none !important;
  }
}

.hide-gt-sm {
  @include media-queries.mq(sm, max) {
    display: none !important;
  }
}

.show-gt-sm-only {
  @include media-queries.mq(sm) {
    display: none !important;
  }
}

.isWebVersion .isHideForWebVersion {
  display: none !important;
}

.isElectron .isHideForElectron {
  display: none !important;
}

.isNoAdvancedFeatures .isHideForNoAdvancedFeatures {
  display: none !important;
}

.isAdvancedFeatures .isHideForAdvancedFeatures {
  display: none !important;
}

.show-dark-only {
  display: none !important;
}

body.isDarkTheme .show-dark-only {
  display: block !important;
}

.show-light-only {
  display: block !important;
}

body.isDarkTheme .show-light-only {
  display: none !important;
}

.mt2 {
  margin-top: 16px;
}

.mt3 {
  margin-top: 24px;
}

.block {
  display: block;
}

.milk-glass {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px) saturate(180%);
}

// Keyboard-only focus ring. Apply to custom interactive elements that don't
// already get a Material focus treatment. Uses the --focus-ring-* tokens from
// _css-variables.scss.
.focus-ring {
  &:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }
}
