@import '../settings/variables';
@import '../tools/mixins/breakpoints';

@mixin shadow-bordered-area($radius) {
  background-color: $color-background;
  border-radius: #{$radius};
  box-shadow: 0 0 0.5rem $color-shadow;
}

.u-shadow-box {
  box-shadow: $shadow-top-navigation;
}

%button-padding {
  padding: 1rem 2rem;
}

.u-vertical-align {
  &--start {
    align-items: flex-start;
  }
  &--center {
    align-items: center;
  }
  &--end {
    align-items: flex-end;
  }
}

.u-full-width {
  width: 100%;
}
.u-full-height {
  height: 100%;
}

@mixin createAlign($infix) {
  &#{$infix}--left {
    text-align: left;
  }
  &#{$infix}--right {
    text-align: right;
  }
  &#{$infix}--center {
    text-align: center;
  }
}

@mixin vertical-align-center($position: relative) {
  position: $position;
  top: 50%;
  transform: translateY(-50%);
}

.u-align {
  @each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

      @include createAlign($infix);
    }
  }

  @each $breakpoint in map-keys($print-grid-breakpoints) {
    @include media-breakpoint-up($breakpoint, $print-grid-breakpoints) {
      $infix: breakpoint-infix($breakpoint, $print-grid-breakpoints);

      @media print {
        @include createAlign($infix);
      }
    }
  }
}

.u-position-right {
  right: 0;
}

.u-position-left {
  right: 0;
}

.u-borderless {
  border: 0;
}

.u-display {
  &--inline-block {
    display: inline-block;
  }

  &-print--none {
    @media print {
      display: none;
    }
  }
}

@mixin createDisplay($infix) {
  .u-display#{$infix}--none {
    display: none;
  }

  .u-display#{$infix}--flex {
    display: flex;
  }

  .u-display#{$infix}--inline-flex {
    display: inline-flex;
  }

  .u-display#{$infix}--block {
    display: block;
  }

  .u-display#{$infix}--inline {
    display: inline;
  }

  .u-display#{$infix}--inline-block {
    display: inline-block;
  }
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    @include createDisplay($infix);
  }
}

@each $breakpoint in map-keys($print-grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $print-grid-breakpoints);
    @media print {
      @include createDisplay($infix);
    }
  }
}

.u-input-fixed-width {
  min-width: 20em;
}

.u-color {
  &--selected {
    color: $color-selected;
  }
  &--primary {
    color: $color-primary;
  }
  &--primary-dark {
    color: $color-primary-dark;
  }
  &--primary-deep {
    color: $color-primary-deep;
  }
  &--neutral {
    color: $color-neutral;
  }
  &--footer-link {
    color: $color-neutral;
  }
  &--neutral-side {
    color: $color-secondary-dark;
  }
  &--secondary-dark {
    color: $color-secondary-dark;
  }
  &--paragraph {
    color: $color-paragraph;
  }
  &--paragraph-light {
    color: $color-paragraph-light;
  }
  &--accent {
    color: $color-accent;
  }
  &--white {
    color: #fff;
  }
  &--black {
    color: #000;
  }
  &--money-positive {
    color: $color-positive;
  }
  &--money-negative {
    color: $color-negative;
  }
  &--dark-grey {
    color: $color-dark-grey;
  }
}

.u-bg-color {
  &--background-alternative {
    background-color: $color-background-alternative;
  }

  &--background-primary {
    background-color: $color-background-primary;
  }

  &--selected {
    background-color: $color-selected;
  }

  &--primary {
    background-color: $color-primary;
  }

  &--primary-dark {
    background-color: $color-primary-dark;
  }
}

.u-paragraph--light {
  color: $color-labels;
  line-height: 1.5em;
}

.u-static-size {
  font-size: 1rem;
}

.u-keep-white-spaces {
  white-space: pre-line;
}

.u-linebreak--md {
  display: inline;
  @include media-breakpoint-up(md) {
    display: block;
  }
}

.u-trend-height {
  height: 17.5em;
}

@mixin dot($size) {
  border-radius: 50%;
  padding: $size / 2;
  width: $size;
  height: $size;
}

.u-overflow {
  &--hidden {
    overflow: hidden;
  }
}
.u-pool-points {
  &__summary {
    &--no-left-gutter {
      padding-left: 0px;
    }
    &--no-background {
      background-color: transparent;
      border: 0px none;
    }
  }
}

* {
  scroll-margin-top: $header-height;
}