@use "sass:math";

@import "./assets/fonts/OpenSans/OpenSans.css";
@import "./assets/fonts/Poppins/Poppins.css";
@import "./mixins.scss";

.default-responsiveness{
  @apply xl:col-span-3 md:col-span-6 col-span-full;
}

input-date{
	@apply rounded-2xl overflow-hidden;
}


:root {
	--ion-table-filter-wrap: nowrap;
	--ion-table-row-wrap: nowrap;
  --ion-color-translucid: color-mix(in srgb, var(--ion-color-medium) 20%, transparent 80%);
}

// /* width */
::-webkit-scrollbar {
  height: 7.5px;
  width: 5px;
  margin: 2px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--ion-color-medium-shade); 
  border-radius: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
  background: color-mix(in srgb, var(--ion-color-medium) 25%, transparent)
}

input-bool, input-color,  input-date,  input-date-time,  input-time,  input-decimal,  input-number,  input-currency, 
input-file,  input-select,  input-string,  input-textarea {
	@apply block;
}

.translucid-border{
  border: 1px solid $translucid-border-color;
}
.\!translucid-border{
  border: 1px solid $translucid-border-color !important;
}
.translucid-background{
  background: $translucid-background-color;
}
.\!translucid-background{
  background: $translucid-background-color !important;
}
.translucid-primary-background{
  background: $translucid-primary-background-color;
}
.\!translucid-primary-background{
  background: $translucid-primary-background-color !important;
}

.blur-background{
  --background: transparent !important;
  background: $translucid-background-color;
  backdrop-filter: blur(10px);
}

.default-transition{
  @apply transition-all ease-in-out duration-200;
}

ion-modal.filter-modal{
	--height: fit-content;
	--min-height: fit-content;
	--max-height: calc(80vh);
	--max-width: 80%;
}

table:not(.mat-calendar-table){
  color: var(--ion-color-dark);
  @apply min-w-full text-sm text-left rtl:text-right table-fixed;
  thead{
    @apply text-xs uppercase;
    white-space: nowrap;
    user-select: none;
    background-color: color-mix(in srgb, var(--ion-color-dark) 10%, var(--ion-color-light));
    color: var(--ion-color-dark);
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 100;
  }
  tbody{
    tr{
      td{
        color: var(--ion-color-dark);
      }
      border-bottom   : color-mix(in srgb, var(--ion-color-dark)  30%, transparent) solid 1px;
      &:last-child{ border: none; }
      &:hover{
        background-color: color-mix(in srgb, var(--ion-color-light) 50%, var(--ion-color-dark)  10%)
      }
    }
  }
}

*{
	font-family: 'Poppins';
}

.font-poppins{
	font-family: 'Poppins' !important;
}
.font-open-sans{
	font-family: 'OpenSans' !important;
}

ion-icon{
	transition: color .5s;
}

ion-button, ion-item{
	&::part(native){
		transition: border-radius .5s;
	}
}

ion-item.submitted.ion-invalid{
	&.submitted{
		--border-color: var(--ion-color-danger) !important;
	}
	ion-icon{
		color: var(--danger) !important;
	}
}

ion-toast{
  &::part(container) {
    padding-right: 0 !important;
  }
}

ion-card-header, ion-card-content{
	padding: .5rem;
}

ion-card{
	border-radius: 1rem;
}

ion-button{
	--border-radius: 1rem
}

ion-item{
	ion-label{
		ion-icon{
			vertical-align: middle;
		}
	}
}

ion-content{
  @apply bg-transparent;
}

ion-card{
	@extend .translucid-border !optional;
	background: transparent;
	ion-card-header{
	  background: var(--ion-color-light);
	}
	ion-card-content{
		background: var(--ion-color-light);
	}
}
  
.blur-before{
	&::before{
		background-color: transparent;
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		backdrop-filter: blur(5px);
	}
}

ion-input.number-class{
	input[type=number]::-webkit-inner-spin-button,
	input[type=number]::-webkit-outer-spin-button {
		-webkit-appearance: none !important;
		-moz-appearance: none !important;
		appearance: none !important;
		margin: 0;
}
}

home{
	@apply size-full;
}

.card-disabled{
	opacity: .5 !important;
}

step{
  @apply w-full;
}
tab{
  @apply size-full block;
}


.animated-from-right{
    animation-name: from-right;
    animation-duration: .3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out 
}

@keyframes from-right {
    from {
        opacity: 0;
        transform: translateX(3rem);
    }
    to {
        opacity: 1;
        transform: translateX();
    }
}

.animated-from-left{
    animation-name: from-left;
    animation-duration: .3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out 
}

@keyframes from-left {
    from {
        opacity: 0;
        transform: translateX(-3rem);
    }
    to {
        opacity: 1;
        transform: translateX();
    }
}


.animated-from-top{
    animation-name: from-top;
    animation-duration: .3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out 
}

@keyframes from-top {
    from {
        opacity: 0;
        transform: translateY(-3rem);
    }
    to {
        opacity: 1;
        transform: translateY();
    }
}

.animated-from-bottom{
    animation-name: from-bottom;
    animation-duration: .3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out 
}

@keyframes from-bottom {
    from {
        opacity: 0;
        transform: translateY(3rem);
    }
    to {
        opacity: 1;
        transform: translateY();
    }
}

.animated{
  animation-name: anim-opacity;
  animation-duration: .3s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out 
}

@keyframes anim-opacity {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

ion-list{
  & > ion-item{
      --background: transparent
      --border-color: var(--ion-color-translucid);
      --border-width: 1px 1px 0px 1px;
      --inner-border-width: 0 !important;
  }
  & > ion-item:first-child {
      --border-radius: 1rem 1rem 0rem 0rem;
  }
  & > ion-item:last-child {
      --border-radius: 0rem 0rem 1rem 1rem;
      --border-width: 1px;
  }
  & > ion-item:only-child{
      --border-radius: 1rem;
      --border-width: 1px;
  }
  &.no-outer-border {
      & > ion-item{
          --border-width: 1px 0px 0px 0px;
      }
      & > ion-item:first-child{
          --border-width: 0px;
      }
  }
}

.ion-content-scroll-host::before,
.ion-content-scroll-host::after {
  position: absolute;
  
  width: 1px;
  height: 1px;
  
  content: "";
}

.ion-content-scroll-host::before {
  bottom: -1px;
}

.ion-content-scroll-host::after {
  top: -1px;
}


.bg-mesh{
  background-color: var(--ion-color-background);

  --color-1: color-mix(in srgb, var(--ion-color-secondary) 10%, var(--ion-color-light)); // rgb(4, 120, 87);
  --color-2: color-mix(in srgb, var(--ion-color-primary) 30%, var(--ion-color-light)); // rgb(49, 46, 129);
  --color-3: color-mix(in srgb, var(--ion-color-primary) 5% , var(--ion-color-light)); // rgb(110, 231, 183);
  --color-4: color-mix(in srgb, var(--ion-color-danger)  10%, var(--ion-color-light)); // rgb(112, 26, 117);
  --color-5: color-mix(in srgb, var(--ion-color-primary) 90%, var(--ion-color-light));  //rgb(191, 219, 254);
  --color-6: color-mix(in srgb, var(--ion-color-secondary) 50%, var(--ion-color-light));  //rgb(153, 246, 228);

  background-image: 
      radial-gradient(at 57% 67%, 
         var(--color-1) 0, transparent 86%), 
      radial-gradient(at 15% 68%, 
         var(--color-2) 0, transparent 70%), 
      radial-gradient(at 49% 40%, 
         var(--color-3) 0, transparent 84%), 
      radial-gradient(at 92% 45%, 
         var(--color-4) 0, transparent 90%), 
      radial-gradient(at 97% 5% , 
         var(--color-5) 0, transparent 99%), 
      radial-gradient(at 72% 63%, 
         var(--color-6) 0, transparent 16%);
}

cdk-virtual-scroll-viewport {
  height: 100%;
  width: 100%;
  .cdk-virtual-scroll-content-wrapper{
    @apply w-full;
  }
}
.remove-select-padding{
  --inner-padding-end: 10px !important;
}

ion-popover.input-select-popover{
  &::part(arrow)::after{
    background: color-mix(in srgb, var(--ion-color-primary) 10%, var(--ion-color-light));
    border: var(--ion-color-step-250) 1px solid;
  }
}

carousel{
  @apply block;
}

ion-breadcrumb{
  @apply text-sm
}

tooltip{
  @apply size-full absolute left-0 top-0;
}

text-tooltip{
  @apply block relative w-full;
}



@mixin property($variable: variable, $syntax: "<color>", $inherits: true, $initial-value: #FF){
  @property --#{$variable} {
    syntax: $syntax;
    initial-value: $initial-value;
    inherits: $inherits;
  }
}

@include property(
  $variable: color-primary, 
  $syntax: "<color>", 
  $inherits: false, 
  $initial-value: transparent
);
@include property(
  $variable: color-primary, 
  $syntax: "<color>", 
  $inherits: false, 
  $initial-value: transparent
);
@include property(
  $variable: step-1-opacity, 
  $syntax: "<number>", 
  $inherits: false, 
  $initial-value: 0
);
@include property(
  $variable: step-2-opacity, 
  $syntax: "<number>", 
  $inherits: false, 
  $initial-value: 0
);
@include property(
  $variable: step-3-opacity, 
  $syntax: "<number>", 
  $inherits: false, 
  $initial-value: 0
);

.gradient-background{
  // --color-primary  : var(--color-primary  , var(--ion-color-primary));
  // --color-secondary: var(--color-secondary, var(--ion-color-light));

  background: radial-gradient(ellipse at 0px top, 
    hsl(from var(--color-primary  , var(--ion-color-primary)) h s l / var(--step-1-opacity, 0.7)), 
    hsl(from var(--color-primary  , var(--ion-color-primary)) h s l / var(--step-2-opacity, 0.3))), 
    hsl(from var(--color-secondary, var(--ion-color-light))   h s l / var(--step-3-opacity, 0.2));
} 


ion-card::part(native){
  height: 100%
}

ion-popover.th-filter{
  --height: fit-content;
  --width: fit-content;
  .popover-viewport{
      height: fit-content;
      width: fit-content;
  }
}

:host{
  --fade-background-rgb: transparent !important;
}

mat-calendar{
  --mat-datepicker-calendar-date-text-color: var(--ion-color-dark);
  --mat-datepicker-calendar-header-color: var(--ion-color-dark);
  .mat-calendar-table-header th{
    padding: 0 !important;
    color: var(--ion-color-medium);
    span {
      justify-content: center;
      align-items: center;
      display: flex;
      height: 100%;
      width: 100%;
      padding: .5rem;
    }
  }
  .mat-calendar-body-label, .mdc-button__label{
    color: var(--ion-color-dark);
  }
  --mdc-text-button-label-text-color: var(--ion-color-dark);
  .mat-calendar-controls{
    margin: 0 !important;
  }
  --mat-datepicker-calendar-date-selected-state-background-color: var(--ion-color-primary);
  --mat-datepicker-calendar-date-today-outline-color: var(--ion-color-primary);
  --mdc-text-button-label-text-color: var(--ion-color-dark);
  --mat-datepicker-calendar-period-button-icon-color: var(--ion-color-dark);
}
body{
  --mat-app-primary: var(--ion-color-primary);
}