@use "variables" as *;

@mixin flex($direction: row, $justify: flex-start, $align: stretch) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}

@mixin mobile {
  @media screen and (max-width: $breakpoint-mobile) {
    @content;
  }
}

@mixin tablet {
  @media screen and (max-width: $breakpoint-tablet) {
    @content;
  }
}

@mixin desktop {
  @media screen and (min-width: $breakpoint-desktop) {
    @content;
  }
}

@mixin card {
  background: var(--surface-elevated);
  border-radius: $border-radius;
  box-shadow: $card-shadow;
  transition: transform $transition-duration $transition-timing,
              box-shadow $transition-duration $transition-timing;

  &:hover {
    transform: translateY(-3px);
    box-shadow: $card-shadow-hover;
  }
}

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

@mixin link {
  color: var(--color-primary);
  text-decoration: none;
  transition: color $transition-duration $transition-timing;

  &:hover {
    color: var(--color-primary-hover);
  }
}

@mixin reset-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font: inherit;
  color: inherit;
  outline: none;
  
  &:focus {
    outline: none;
  }
}

@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

@mixin center($position: absolute) {
  position: $position;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}