@use "./variables/colors";
@use "./variables/units";
@use "sass:list";
@use "sass:meta";

@mixin box-sizing($box-sizing: border-box) {
  *,
  *::after,
  *::before {
    box-sizing: $box-sizing;
  }
}

@mixin clearfix() {
  &::before,
  &::after {
    display: table;
    content: " ";
  }

  &::after {
    clear: both;
  }
}

@mixin placeholder($color) {
  // Firefox
  &::-moz-placeholder {
    color: $color;
    opacity: 1;
  }

  // Internet Explorer 10+
  &:-ms-input-placeholder {
    color: $color;
  }

  // Safari and Chrome
  &::-webkit-input-placeholder {
    color: $color;
  }
}

@mixin sr-only() {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip-path: rect(0 0 0 0);
}

@mixin focus-outline($offset: units.$focus-outline-offset) {
  border-radius: units.$focus-border-radius;
  @if $offset != 0 {
    outline-offset: $offset;
  }
  outline: units.$focus-outline-width solid colors.$focus-outline-color;
}

/// Genereert een `transition` met vaste easing en optionele duur en delay per property.
///
/// @param {ArgList} $transitions...
///   - "property": gebruikt standaard duur (260ms) en delay (0ms)
///   - ("property", duur): eigen duur, geen delay
///   - ("property", duur, delay): eigen duur én delay
///
/// @example
///   @include transition(opacity, ("transform", 300ms), ("color", 500ms, 200ms));
///
/// @output
///   transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];
@mixin transition($transitions...) {
  $result: ();

  @each $item in $transitions {
    $prop: null;
    $delay: 0ms;
    $animationTime: 260ms;

    @if meta.type-of($item) == "list" {
      $prop: list.nth($item, 1);
      @if list.length($item) > 1 {
        $animationTime: list.nth($item, 2);
      }
      @if list.length($item) > 2 {
        $delay: list.nth($item, 3);
      }
    } @else {
      $prop: $item;
    }

    $result: list.append($result, #{$prop $animationTime} cubic-bezier(0.4, 0, 0.2, 1) #{$delay}, $separator: comma);
  }

  transition: $result;
}