/* 
     * SEGMENTED CONTROLS LAYOUT
     */ 

    /*
     * Container
     */
     .hkknx-segmented-control {
        display: flex;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        transition: all .3s ease;
      }
  
      /*
       * Vissualy hidden radiobuttons
       */
      .hkknx-segmented-control input {
        position: absolute !important;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
        clip: rect(1px, 1px, 1px, 1px);
        white-space: nowrap; /* added line */
      }
  
      /* 
       * Labels need to be the same size
       */
      .hkknx-segmented-control label {
        grid-row: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        cursor: pointer;
        flex: 1 1 0px;
        position: relative;
        z-index: 2;
        transition: inherit;
        padding: .5rem;
      }
  
      /* 
       * Adjust z-index of last label since that contains 
       * the paddle that needs to go beneath all other labels 
       */
      .hkknx-segmented-control label:last-of-type {
        z-index: 1;
      }
  
      /*
       * Paddle 
       */
      .hkknx-segmented-control label:last-of-type::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -2;
        /*background-color: black;*/
        transition: inherit;
      }
  
      /*
       * Move paddle depending on which option is selected
       */
      .hkknx-segmented-control.flex-row input:nth-last-of-type(2):checked ~ label:last-of-type::after {
        transform: translateX(-100%);
      }
  
      .hkknx-segmented-control.flex-row input:nth-last-of-type(3):checked ~ label:last-of-type::after {
        transform: translateX(-200%);
      }
  
      .hkknx-segmented-control.flex-row input:nth-last-of-type(4):checked ~ label:last-of-type::after {
        transform: translateX(-300%);
      }
  
      .hkknx-segmented-control.flex-row input:nth-last-of-type(5):checked ~ label:last-of-type::after {
        transform: translateX(-400%);
      }
  
      .hkknx-segmented-control.flex-row input:nth-last-of-type(6):checked ~ label:last-of-type::after {
        transform: translateX(-500%);
      }
  
      .hkknx-segmented-control.flex-row input:nth-last-of-type(7):checked ~ label:last-of-type::after {
        transform: translateX(-600%);
      }
  
      .hkknx-segmented-control.flex-row input:nth-last-of-type(8):checked ~ label:last-of-type::after {
        transform: translateX(-700%);
      }
  
      .hkknx-segmented-control.flex-row input:nth-last-of-type(9):checked ~ label:last-of-type::after {
        transform: translateX(-800%);
      }
  
      .hkknx-segmented-control.flex-row input:nth-last-of-type(10):checked ~ label:last-of-type::after {
        transform: translateX(-900%);
      }

      .hkknx-segmented-control.flex-column input:nth-last-of-type(2):checked ~ label:last-of-type::after {
        transform: translateY(-100%);
      }
  
      .hkknx-segmented-control.flex-column input:nth-last-of-type(3):checked ~ label:last-of-type::after {
        transform: translateY(-200%);
      }
  
      .hkknx-segmented-control.flex-column input:nth-last-of-type(4):checked ~ label:last-of-type::after {
        transform: translateY(-300%);
      }
  
      .hkknx-segmented-control.flex-column input:nth-last-of-type(5):checked ~ label:last-of-type::after {
        transform: translateY(-400%);
      }
  
      .hkknx-segmented-control.flex-column input:nth-last-of-type(6):checked ~ label:last-of-type::after {
        transform: translateY(-500%);
      }
  
      .hkknx-segmented-control.flex-column input:nth-last-of-type(7):checked ~ label:last-of-type::after {
        transform: translateY(-600%);
      }
  
      .hkknx-segmented-control.flex-column input:nth-last-of-type(8):checked ~ label:last-of-type::after {
        transform: translateY(-700%);
      }
  
      .hkknx-segmented-control.flex-column input:nth-last-of-type(9):checked ~ label:last-of-type::after {
        transform: translateY(-800%);
      }
  
      .hkknx-segmented-control.flex-column input:nth-last-of-type(10):checked ~ label:last-of-type::after {
        transform: translateY(-900%);
      }
  
  
      /*
       * IOS 13 Theme
       * Special thanks to https://www.figma.com/community/file/768365747273056340
       */
      
      /*
       * Container
       */
      .hkknx-segmented-control {
        border-radius:var(--bs-border-radius-xl)!important;
        background: var(--bs-tertiary-bg);
        padding: 0.125rem;
      }
  
      /*
       * Labels 
       */
      .hkknx-segmented-control label {
        font-weight: 500;
        line-height: 1;
      }
  
      /*
       * Focus style for keyboard navigation
       */
      .hkknx-segmented-control:focus-within {
          box-shadow: 0 0 0 .2rem rgba(0,122,255,0.75);
      }
  
      /*
       * Paddle
       */
      .hkknx-segmented-control label:last-of-type::after {
        background: var(--bs-secondary-bg);
        border-radius:calc(var(--bs-border-radius-xl)*0.85)!important;
        border: 0.5px solid rgba(0, 0, 0, 0.04);
      }