@use 'variables';

@mixin mobile {
  @media (min-width: variables.$extension-width + 2) and (max-width: variables.$phone-width) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: variables.$phone-width + 1) {
    @content;
  }
}

// Based on class added to html element by App.vue component
@mixin env-mobile {
  @at-root html.is-mobile & {
    @content;
  }
}

// Based on class added to html element by App.vue component
@mixin env-mobile-ios {
  @at-root html.is-mobile-ios & {
    @content;
  }
}

// Running in extension popup or extension side panel
@mixin env-extension {
  @at-root html.is-extension & {
    @content;
  }
}

// Running in regular browser window
@mixin env-web {
  @at-root html.is-web & {
    @content;
  }
}

@mixin collapsed {
  @media screen and (max-height: 250px) {
    @content;
  }
}

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

/**
 * Allows to add custom dashed outline to elements with control on the dash width
 * and space between the dashes.
 */
@mixin dashed-border(
  $color: rgba(variables.$color-white, 0.5),
  $width: 1px,
  $dash: 4px,
  $spacing: 4px
) {
  $dash-and-space: $dash + $spacing;

  background-image:
    repeating-linear-gradient(0deg, $color, $color $dash, transparent $dash, transparent $dash-and-space, $color $dash-and-space),
    repeating-linear-gradient(90deg, $color, $color $dash, transparent $dash, transparent $dash-and-space, $color $dash-and-space),
    repeating-linear-gradient(180deg, $color, $color $dash, transparent $dash, transparent $dash-and-space, $color $dash-and-space),
    repeating-linear-gradient(270deg, $color, $color $dash, transparent $dash, transparent $dash-and-space, $color $dash-and-space);
  background-size: $width 100%, 100% $width, $width 100%, 100% $width;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
}
