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

/*CHIP*/
/* scroll container */
.horizontal-scroll-container {
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    gap: .5rem;
    overflow: auto;
    scroll-snap-type: both mandatory;
  }
  
  /* 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 */
  }
  
  

  .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(--bg-core-primary-darken);
    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(--bg-core-primary-dark);

  }

.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-light);
    cursor: pointer;
    overflow: hidden;
      &:hover{
        background-color: var(--bg-core-primary-lighten);
      }  
      &:active,
      &.active{
        border: 1px solid var(--bg-core-primary);
        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*/
  
  /*drop-down*/
  /* The container must be positioned relative: */
  .custom-select {
    position: relative;
    font-family: Arial;
  }
  
  .custom-select select {
    display: none; /*hide original SELECT element: */
  }
  
  .select-selected {
    background-color: DodgerBlue;
  }
  
  /* Style the arrow inside the select element: */
  .select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
  }
  
  /* Point the arrow upwards when the select box is open (active): */
  .select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px;
  }
  
  /* style the items (options), including the selected item: */
  .select-items div,.select-selected {
    color: #ffffff;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
  }
  
  /* Style items (options): */
  .select-items {
    position: absolute;
    background-color: DodgerBlue;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
  }
  
  /* Hide the items when the select box is closed: */
  .select-hide {
    display: none;
  }
  
  .select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
  }
  /*end-down*/
  
  /*END CHIP*/