@use "../colors/c-gradient";
@use "../colors/pink/c-pink-soft";

@mixin pattern-gradient-border($border-size: 1px, $border: 'top') {
  $color: c-pink-soft.$d1;

  @if($border == 'top') {
    border-top: $border-size solid $color;
  } @else if($border == 'left') {
    border-left: $border-size solid $color;
  } @else if($border == 'right') {
    border-right: $border-size solid $color;
  } @else if($border == 'bottom') {
    border-bottom: $border-size solid $color;
  } @else {
    border: $border-size solid $color;
  }

  border-image-source: c-gradient.$standard;
  border-image-slice: 0.5;
}
@mixin pattern-gradient-border-multiple($border-top: 1px, $border-right: 1px, $border-bottom: 1px, $border-left: 1px) {
  border-top: $border-top solid;
  border-right: $border-right solid;
  border-bottom: $border-bottom solid;
  border-left: $border-left solid;

  border-image-source: c-gradient.$standard;
  border-image-slice: 0.5;
}

@mixin pattern-gradient-border-ie($border-size: 1px, $border: 'top', $relative: false) {
  @if ($relative == true) { position: relative; }

  @if($border == 'top') {
    border-top: solid 0 transparent !important;
    @if ($relative == false) { padding-top: $border-size; }

    &::before {
      width: 100%;
      height: $border-size;
      left: 0;
      top: $border-size;
      margin-top: -$border-size;
      content: '';
      position: absolute;
      background: c-gradient.$standard;
    }

  } @else if($border == 'left') {
    border-left: solid 0 transparent !important;
    @if ($relative == false) { padding-left: $border-size; }

    &::before {
      width: $border-size;
      height: 100%;
      left: $border-size;
      margin-left: -$border-size;
      top: 0;
      content: '';
      position: absolute;
      background: c-gradient.$standard-180;
    }

  } @else if($border == 'right') {
    border-right: solid 0 transparent !important;
    @if ($relative == false) { padding-right: $border-size; }

    &::after {
      width: $border-size;
      height: 100%;
      right: $border-size;
      margin-right: -$border-size;
      top: 0;
      content: '';
      position: absolute;
      background: c-gradient.$standard;
    }

  } @else if($border == 'bottom') {
    border-bottom: solid 0 transparent !important;
    @if ($relative == false) { padding-bottom: $border-size; }

    &::after {
      width: 100%;
      height: $border-size;
      left: 0;
      bottom: $border-size;
      margin-bottom: -$border-size;
      content: '';
      position: absolute;
      background: c-gradient.$standard;
    }
  }
}