@use "../util" as *;
@use "../globals" as *;

/*CHIP*/
/* scroll container */
.horizontal-scroll-container {
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    gap: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: both mandatory;
    scroll-padding: 0.25rem;
    -webkit-overflow-scrolling:scroll;
  }
  
  /* Hide scrollbar for Chrome, Safari and Opera */
  .horizontal-scroll-container::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .horizontal-scroll-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  
  .horizontal-scroll-container:focus-within {
  overflow: inherit;
  overflow-x: auto;
    @include breakpoint (sm) {
      overflow-x: inherit;
    }
  }

  .chip-icon {
    --height: 2.5rem;
    height: var(--height);
    aspect-ratio: 1 / 1;
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--accent-color);
    overflow: hidden;  
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.6,-1.25,0.6,2.25);
  }

  .chip-icon:hover,
  .chip-icon:active,
  .chip-icon:active {
    background-color: var(--accent-color-hover);

  }

.chip-icon.float-left {
   float: left; 
   margin: .05rem .5rem .15rem 0;
   margin-top: -.25rem;
   clear: both;
  }

  .chip-group {
    --height: 1.5rem;
  
    border: 1px solid var(--bg-core-primary);
    padding: .15rem;
    min-width: max-content;
    color: var(--text-core); 
    border-radius: $border-radius-pill;
    background-color: var(--bg-core-primary-light);
    display: inline-block;
    position:relative;
    scroll-snap-align: start;  
  }
  
  .chip-group-content{
    height: var(--height);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .chip-leading-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: $border-radius-pill;
    background-color: var(--bg-core-primary-light);
    height: var(--height);
    aspect-ratio: 1 / 1;
    overflow: hidden;  
  }
  
  .chip-leading-icon img{
    object-fit: cover;
    height: var(--height);
    aspect-ratio: 1 / 1;  
  }
  
  .chip-cta-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: $border-radius-pill;
    background-color: transparent;
    cursor: pointer;
    height: var(--height);
    aspect-ratio: 1 / 1; 
    transition: all 0.35s cubic-bezier(0.6,-1.25,0.6,2.25);
  }
  
  .chip-label{
    font-size: $font-size-sm;
    margin:0 .85rem;
  }
  
  .chip-cta-icon:hover{
    background-color: var(--bg-core-primary-lighten);
  }
  
  
  /*filter*/
  .chip-group.filter {
    border: 1px solid var(--bg-core-primary);
    background-color: var(--bg-core-primary-lighten);
    cursor: pointer;
    overflow: hidden;
      &:hover{
        background-color: var(--bg-core-primary);
      }  
      &:active,
      &.active{
        border: 1px solid var(--bg-core-primary);
        background-color: var(--bg-core-primary-lighten);
        &:active:hover,
        &.active:hover{
          background-color: var(--bg-core-primary);
        }  
      }  
  }
  
  .chip-group.filter .chip-leading-icon{
    //display: none;
    max-width: 0;
    transform: translateX(calc(var(--height) * -1.25));
    transition: all 0.35s cubic-bezier(0.6,-1.25,0.6,2.25);
  }
  
  .chip-group.filter.active .chip-leading-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: $border-radius-pill;
    background-color: var(--bg-core-primary-light);
    height: var(--height);
    aspect-ratio: 1 / 1; 
    transform: translateX(0);
    max-width: var(--height);
  }
  
  .chip-group.select .chip-cta-icon{
    display: none;
  }
  /*end select*/
  

 

.chip-group input  {
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;

  &:focus-within ~ .drop-down {
      height: auto;
      max-height: max-content;
      opacity: 1;
      pointer-events: initial;


  }
  &:focus-within ~ .backdrop {
      opacity: 1;
      display: block;
  }
}



  /*end-down*/
  
  /*END CHIP*/