@import "tokens";

@mixin placeholder {
  &.placeholder { @content }
  &:-moz-placeholder { @content }
  &::-webkit-input-placeholder { @content }
}

@mixin centered-flex() {
  display: flex;
  justify-content: center;
  align-items: center;
}
@mixin centered-absolute() {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@mixin panel() {
  background: $color-panel;
  border-radius: $radius-card;
  box-shadow: $style-card-shadow;
  color: $color-panel-font;
}

@mixin panel-header() {
  display: flex;
  align-items: center;
  padding: 0 $spacing-m;
  border-radius: $radius-card $radius-card 0 0;
  height: $size-xl;
  background: $color-panel-header;
  color: $color-panel-header-text;
  @include font-h4();
}

@mixin card() {
  background: $color-cardbase;
  border-radius: $radius-card;
  box-shadow: $style-card-shadow;
  color: $color-card-font;
}

@mixin transition-link {
  transition: opacity ease .5s;

  &:active {
    opacity: .7;
  }
}

@mixin transition-img {
  transition: transform ease .5s;

  &:hover {
    transform: scale(1.2);
  }
}

@mixin tablet-media {
  @media (max-width: $tabletBreakpoint) {
    @content
  }
}

@mixin phone-media {
  @media (max-width: $phoneBreakpoint) {
    @content
  }
}

@mixin small-phone-media {
  @media (max-width: $smallPhoneBreakpoint) {
    @content
  }
}