@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-framework-table-light: #dfe0e3;
	--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: 5px;
  width: 5px;
  margin: 2px;
}

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

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{
  color: var(--ion-color-step-700);
  @apply min-w-full text-sm text-left rtl:text-right table-fixed;
  thead{
    @apply text-xs uppercase;
    user-select: none;
    background-color: var(--ion-color-step-300);
    color: var(--ion-color-step-700);
    @media (prefers-color-scheme: light) {
      background-color: var(--ion-framework-table-light);
    }
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 100;
  }
  tbody{
    tr{
      cursor: pointer;
      background-color: color-mix(in srgb, var(--ion-color-light) 70%, transparent  30%);
      border-bottom: color-mix(in srgb, var(--ion-color-dark)  50%, transparent 50%) 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;
}