@use 'colors';
@use 'constants';

@mixin card {
  border-radius: constants.$border-radius;
  padding: 2em;
  box-shadow: 0 10px 36px -4px darken(colors.$color-blue-dark, 6);
  background-color: lighten(colors.$color-blue-dark, 6);
  background-image: constants.$noise;
}

@mixin flex($justify: flex-start, $align: flex-start, $direction: row) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
  flex-direction: $direction;
}

/* Change Autocomplete styles in Chrome*/
@mixin autofill {
  &:-webkit-autofill {
    -webkit-text-fill-color: colors.$color-blue-light;
    box-shadow: colors.$sink, 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
  }
}

// if we need to render item with clientWidth || clientHeight but element should not be displayed in viewport
@mixin renderOutOfViewport() {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
}