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


$border-radius-btn-segmented: 100vw;




.btn-segmented  {
    gap: 0;  
    }
  
.btn-segmented > * {
    border-radius: 0;
    &:first-of-type{
      border-radius: $border-radius-btn-segmented 0 0 $border-radius-btn-segmented;
    }
    &:last-of-type{
      border-radius: 0 $border-radius-btn-segmented  $border-radius-btn-segmented 0;
    }
  }
  
.btn-segmented > *:not(:first-of-type) {
    margin-left: calc(1px * -1);
}

.btn-segmented .btn-check {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}
  
.btn-segmented .btn-outline-core {
    color:  var(--bg-core-primary-dark);
    background-color: transparent;
    border: 1px solid var(--bg-core-primary-dark)!important;
        &:hover{
            background-color: var(--bg-core-primary-light);
            color:  var(--text-core);
        }
        &:focus-visible,
        &.focus {
            outline: 0;
            box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten);
        }
        &:active,
        &.active{
            color: var(--bg-core-primary-dark);
            background-color:var(--bg-core-primary-lighten) ;
            border-color: var(--bg-core-primary-dark) ;
        }
}
.btn-check:checked+.btn-outline-core{
    color: var(--bg-core-primary-dark)!important;
    background-color:var(--bg-core-primary-lighten)!important ;
    border-color: var(--bg-core-primary-dark)!important ;
}

@each $key, $val in $theme-colors {
    .btn-segmented .btn-outline-#{$key} {
        color:darken($val, 30);
        background-color: lighten($val, 30%);
        border: 1px solid darken($val, 40);
      &:hover {
        color: darken($val, 35);
        background-color: lighten($val, 25);
      }
      &:focus-visible,
      &.focus {
        outline: 0;
        box-shadow: 0 0 0 0.15rem lighten($val, 20);
      }
      &:active,
      &.active {
        background-color: lighten($val, 10);
        color: darken($val, 35); 
      }      
    }
    .btn-check:checked+.btn-outline-#{$key} {
        background-color: lighten($val, 10);
        color: darken($val, 35);
    }
}


// .btn-segmented .btn-check:checked+.btn{
//     color: var(--bg-core-primary-dark);
//     background-color:var(--bg-core-primary-lighten) !important;
//     border-color: var(--bg-core-primary-dark) !important;
//     transition: all .35s ease-in-out;

// }

.btn-segmented .btn-check:checked+.btn svg{
  display: inline-block;
  margin-right: .5rem;
  margin-left: -.5rem;
}
  
.btn-segmented .btn-check+.btn svg{
    display: none;
}


 

