@use "sass:math";

@for $i from 1 through 100 {
  .modal-w-#{$i}{
      @media (orientation: landscape) {
          --width: #{$i + '%'};
      }
  }
}
@for $i from 1 through 100 {
  .modal-h-#{$i}{
      @media (orientation: landscape) {
          --height: #{$i + '%'};
      }
  }
}
@for $i from 1 through 100 {
  .modal-size-#{$i}{
      @media (orientation: landscape) {
          --height: #{$i + '%'};
          --width: #{$i + '%'};
      }
  }
}

$colors: primary, secondary, tertiary, success, warning, danger, light, medium, dark, translucid,
         primary-tint, secondary-tint, tertiary-tint, success-tint, warning-tint, danger-tint, light-tint, medium-tint, dark-tint;
$steps : 5, 7, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95;
//[ Text Colors ]
@mixin text-colors($colors){
	@each $color in $colors {
		.text-#{$color} {
			color: var(--ion-color-#{$color})
		}
    .hover\:text-#{$color} {
      @apply transition-all ease-in-out duration-300;
      &:hover{
        color: var(--ion-color-#{$color});
      }
    }

    .\!text-#{$color} {
			color: var(--ion-color-#{$color}) !important;
		}
    .hover\:\!text-#{$color} {
      @apply transition-all ease-in-out duration-300;
      &:hover{
        color: var(--ion-color-#{$color}) !important;
      }
    }
	}
}
@mixin text-colors-steps($colors, $steps){
	@each $color in $colors {
    @each $step in $steps {
      .text-#{$color}\/#{$step} {
        color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
        );
      }
      .hover\:text-#{$color}\/#{$step}{
        @apply transition-all ease-in-out duration-300;
        &:hover{
          color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
          );
        }
      }

      .\!text-#{$color}\/#{$step} {
        color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100)) !important
        );
      }
      .hover\:\!text-#{$color}\/#{$step}{
        @apply transition-all ease-in-out duration-300;
        &:hover{
          color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100)) !important
          );
        }
      }
    }
	}
}
@include text-colors($colors);
@include text-colors-steps($colors, $steps);

//[ BG Colors ]
@mixin bg-colors($colors){
  @each $color in $colors {
    .bg-#{$color} {
      background-color: var(--ion-color-#{$color});
    }
    .hover\:bg-#{$color} {
       @apply transition-all ease-in-out duration-300;
      &:hover{
        background-color: var(--ion-color-#{$color});
      }
    }

    .\!bg-#{$color} {
      background-color: var(--ion-color-#{$color}) !important;
    }
    .hover\:\!bg-#{$color} {
       @apply transition-all ease-in-out duration-300;
      &:hover{
        background-color: var(--ion-color-#{$color}) !important;
      }
    }
	}
}
@mixin bg-colors-steps($colors, $steps){
	@each $color in $colors {
    @each $step in $steps {
      .bg-#{$color}\/#{$step} {
        background-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
        );
      }
      .hover\:bg-#{$color}\/#{$step}{
        @apply transition-all ease-in-out duration-300;
        &:hover{
          background-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
          );
        }
      }

      .\!bg-#{$color}\/#{$step} {
        background-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100)) !important
        );
      }
      .hover\:\!bg-#{$color}\/#{$step}{
        @apply transition-all ease-in-out duration-300;
        &:hover{
          background-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100)) !important
          );
        }
      }
    }
	}
}

@include bg-colors($colors);
@include bg-colors-steps($colors, $steps);

//[ Borders ]
@mixin border-colors($colors){
  @each $color in $colors {
    .border-#{$color} {
      border-color: var(--ion-color-#{$color});
    }
    .border-t-#{$color} {
      border-top-color   : var(--ion-color-#{$color});
    }
    .border-b-#{$color} {
      border-bottom-color: var(--ion-color-#{$color});
    }
    .border-y-#{$color} {
      border-top-color   : var(--ion-color-#{$color});
      border-bottom-color: var(--ion-color-#{$color});
    }

    .border-l-#{$color} {
      border-left-color   : var(--ion-color-#{$color});
    }
    .border-r-#{$color} {
      border-right-color: var(--ion-color-#{$color});
    }
    .border-x-#{$color} {
      border-left-color : var(--ion-color-#{$color});
      border-right-color: var(--ion-color-#{$color});
    }

    .hover\:border-#{$color} {
       @apply transition-all ease-in-out duration-300;
      &:hover{
        border-color: var(--ion-color-#{$color});
      }
    }

    .hover\:border-t-#{$color} {
      @apply transition-all ease-in-out duration-300;
      &:hover{
        border-top-color: var(--ion-color-#{$color});
      }
    }
    .hover\:border-b-#{$color} {
      @apply transition-all ease-in-out duration-300;
      &:hover{
        border-bottom-color: var(--ion-color-#{$color});
      }
    }
    .hover\:border-y-#{$color} {
      @apply transition-all ease-in-out duration-300;
      &:hover{
        border-bottom-color: var(--ion-color-#{$color});
        border-top-color   : var(--ion-color-#{$color});
      }
    }

    .hover\:border-l-#{$color} {
      @apply transition-all ease-in-out duration-300;
      &:hover{
        border-left-color: var(--ion-color-#{$color});
      }
    }
    .hover\:border-r-#{$color} {
      @apply transition-all ease-in-out duration-300;
      &:hover{
        border-right-color: var(--ion-color-#{$color});
      }
    }
    .hover\:border-x-#{$color} {
      @apply transition-all ease-in-out duration-300;
      &:hover{
        border-left-color : var(--ion-color-#{$color});
        border-right-color: var(--ion-color-#{$color});
      }
    }
	}
}
@mixin border-colors-steps($colors, $steps){
	@each $color in $colors {
    @each $step in $steps {
      .border-#{$color}\/#{$step} {
        border-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
        );
      }

      .border-t-#{$color}\/#{$step} {
        border-top-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
        );
      }
      .border-b-#{$color}\/#{$step} {
        border-bottom-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
        );
      }
      .border-y-#{$color}\/#{$step} {
        border-top-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
        );
        border-bottom-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
        );
      }

      .border-l-#{$color}\/#{$step} {
        border-left-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
        );
      }
      .border-r-#{$color}\/#{$step} {
        border-right-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
        );
      }
      .border-x-#{$color}\/#{$step} {
        border-left-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
        );
        border-right-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
        );
      }

      .hover\:border-#{$color}\/#{$step}{
        @apply transition-all ease-in-out duration-300;
        &:hover{
          border-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
          );
        }
      }

      .hover\:border-t-#{$color}\/#{$step}{
        @apply transition-all ease-in-out duration-300;
        &:hover{
          border-top-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
          );
        }
      }
      .hover\:border-b-#{$color}\/#{$step}{
        @apply transition-all ease-in-out duration-300;
        &:hover{
          border-bottom-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
          );
        }
      }
      .hover\:border-y-#{$color}\/#{$step}{
        @apply transition-all ease-in-out duration-300;
        &:hover{
          border-bottom-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
          );
          border-top-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
          );
        }
      }

      .hover\:border-l-#{$color}\/#{$step}{
        @apply transition-all ease-in-out duration-300;
        &:hover{
          border-left-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
          );
        }
      }
      .hover\:border-r-#{$color}\/#{$step}{
        @apply transition-all ease-in-out duration-300;
        &:hover{
          border-right-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
          );
        }
      }
      .hover\:border-x-#{$color}\/#{$step}{
        @apply transition-all ease-in-out duration-300;
        &:hover{
          border-left-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
          );
          border-right-color: color-mix(
            in srgb, 
            var(--ion-color-#{$color}) 
                math.percentage(math.div($step, 100)), 
            transparent 
                math.percentage(math.div(100 - $step, 100))
          );
        }
      }
    }
	}
}

@include border-colors($colors);
@include border-colors-steps($colors, $steps);


.mask-x{
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 1) 99%, rgba(0, 0, 0, 0) 100%);
}

.mask-y{
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 1) 99%, rgba(0, 0, 0, 0) 100%);
}

$steps-mask: 2, 3, 4, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50;
@mixin masks($steps){
  @each $step in $steps {
    .mask-x\/#{$step} {
      mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) math.percentage(math.div($step, 100)), rgba(0, 0, 0, 1) math.percentage(math.div(100 - $step, 100)), rgba(0, 0, 0, 0) 100%);
    }
    .mask-y\/#{$step} {
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) math.percentage(math.div($step, 100)), rgba(0, 0, 0, 1) math.percentage(math.div(100 - $step, 100)), rgba(0, 0, 0, 0) 100%);
    }
  }
}
@include masks($steps-mask);