@import 'variables';

/*
 * Responsive Mixin
 * Applies CSS in a mobile-first way
 * Supports 'md', and 'lg' breakpoints
 */

@mixin breakpoint($size) {
  @if $size == md {
    @media (min-width: $breakpoint-md) {
      @content;
    }
  }
  @if $size == lg {
    @media (min-width: $breakpoint-lg) {
      @content;
    }
  }
}

@mixin optional-at-root($sel) {
  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
    @content;
  }
}

@mixin placeholder {
  @include optional-at-root('::placeholder') {
    @content;
  }

  @include optional-at-root('::-webkit-input-placeholder') {
    @content;
  }

  @include optional-at-root(':-moz-placeholder') {
    @content;
  }

  @include optional-at-root('::-moz-placeholder') {
    @content;
  }

  @include optional-at-root(':-ms-input-placeholder') {
    @content;
  }
}

@function units($num) {
  @return $num * $unit;
}

@mixin generateGrid($cols, $gap) {
  $screenSizes: (small medium large);

  .column {
    box-sizing: border-box;
    flex: 1 1 100%;
    margin-right: #{$gap};
    position: relative;
    text-align: left;
    &.centeredContent {
      justify-content: center;
      text-align: center;
    }
    &.allowOverflow {
      overflow: visible;
    }
  }

  .column:last-child {
    @include breakpoint(medium) {
      margin-right: 0;
    }
  }

  $columnWidth: calc(100% / $cols);

  @each $size in $screenSizes {
    @for $i from 1 through $cols {
      .#{$size}#{$i} {
        @include breakpoint($size) {
          display: block;
          overflow: hidden;
          @if $i != $cols {
            flex-basis: calc((#{$columnWidth} * #{$i}) - #{$gap});
          } @else {
            flex-basis: calc(#{$columnWidth} * #{$i});
          }

          @if $size == 'small' and $i == $cols {
            flex-grow: 1;
          } @else {
            flex-grow: 0;
          }
        }
      }
      .#{$size}Order#{$i} {
        @if $size == 'large' {
          @include breakpoint($size) {
            order: $i;
          }
        } @else {
          @include breakpoint($size only) {
            order: $i;
          }
        }
      }
    }
    .#{$size}Order0 {
      @if $size == 'large' {
        @include breakpoint($size) {
          order: 0;
        }
      } @else {
        @include breakpoint($size only) {
          order: 0;
        }
      }
    }
    .#{$size}Auto {
      @include breakpoint($size) {
        flex: 1;
      }
    }
    .#{$size}Hide {
      @include breakpoint($size) {
        display: none;
      }
    }
  }
}

// https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
@mixin visually-hidden() {
  &:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

// Target users with a desktop-style cursor rather than touch screen.
// This is especially useful for :focus, :hover, :active states etc.
@mixin with-fine-pointer() {
  @media (hover: hover) and (pointer: fine) {
    @content;
  }
}

// https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#selectively_showing_the_focus_indicator
@mixin focus-indicator() {
  // Provide a fallback style for browsers that don't support :focus-visible (Safari)
  &:focus {
    outline: 2px solid $color-action;
    outline-offset: 2px;
  }

  // Remove the focus indicator on mouse-focus for browsers that do support :focus-visible
  &:focus:not(:focus-visible) {
    outline: none;
  }

  // Draw a very noticeable focus style for keyboard-focus on browsers that do support :focus-visible
  &:focus-visible {
    outline: 2px solid $color-action;
    outline-offset: 2px;
  }
}