@import "./../scss/sc-mixins/sc-breakpoints";
@import "./../scss/sc-variables";

.slide-button-toggle-group {
    --sbtg-button-count: 2;
    --sbtg-active-position: 1;
  
    position: relative;
    display: inline-grid;
    grid-template-columns: repeat(var(--sbtg-button-count), minmax(0, 1fr));
    // background-color: var(--button-background-color) !important;
    // backdrop-filter: blur(var(--button-background-blur));
    border-radius: $button-border-radius;
  
    &__bg-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: calc(100% / var(--sbtg-button-count));
      height: 100%;
      z-index: 50;
      padding: $sc-sbtg-button-active-background-offset;
      transform: translateX(calc((var(--sbtg-active-position) - 1) * 100%));
      transition: transform $sc-sbtg-transition-duration $sc-sbtg-transition-timing-function;
  
      .background {
        width: 100%;
        height: 100%;
        // background-color: var(--button-active-background-color);
        border-radius: calc(#{$button-border-radius} - #{$sc-sbtg-button-active-background-offset});
      }
    }
  
    .mat-button,
    .mat-icon-button {
      border-radius: 0;
      z-index: 100;
    //   background-color: transparent !important;
    //   backdrop-filter: none;
    }
  }