@import 'variables';

// CSS image replacement
/////////////////////////////////////

@mixin hide-text() {
  font: 0/0 a; // stylelint-disable font-family-no-missing-generic-family-keyword
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

// Text overflow
/////////////////////////////////////

@mixin ellipsis() {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

// Layout breakout
/////////////////////////////////////

@mixin breakoutviewport() {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);

  @media (min-width: $screen-md) {
    @include breakoutviewport--base();
  }
}

@mixin breakoutviewport--base() {
  margin-left: -($spacer * 4);
  margin-right: -($spacer * 4);
}

@mixin breakoutviewport--full() {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

// Button sizing
/////////////////////////////////////

@mixin button-size(
  $padding-vertical,
  $padding-horizontal,
  $font-size,
  $line-height,
  $border-radius
) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  line-height: $line-height;
  border-radius: $border-radius;
}

// Form control sizing
/////////////////////////////////////

@mixin input-size(
  $padding-vertical,
  $padding-horizontal,
  $font-size,
  $line-height,
  $border-radius
) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  line-height: $line-height;
  border-radius: $border-radius;

  &input[type='search'] {
    background-size: $font-size;
    background-position: $padding-vertical center;
    padding-left: ($padding-vertical * 4);
  }

  &select {
    line-height: $input-height;
  }

  &textarea,
  &select[multiple] {
    height: auto;
  }
}

// Placeholder text
/////////////////////////////////////

@mixin placeholder($color: $input-color-placeholder) {
  &::-moz-placeholder {
    color: $color;
    opacity: 1; // Override Firefox's unusual default opacity; See https//github.com/twbs/bootstrap/pull/11526
  }

  &::-webkit-input-placeholder {
    color: $color;
  }

  &:-ms-input-placeholder {
    color: $color;
  }
}

// Image frame style
/////////////////////////////////////

@mixin media-frame() {
  @include transition();

  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: $border-radius;
  box-shadow: 0 3px 5px rgba($brand-grey, 0.2),
    0 5px 16px rgba($brand-grey, 0.2);

  @media (min-width: $screen-sm) {
    border: 2px solid transparent;
  }

  :global(.dark) & {
    box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), 0.25),
      0 5px 16px rgba(darken($brand-main, 20%), 0.25);
  }

  img {
    border-radius: $border-radius;
  }
}