@define refs {
  name: tedirDatePicker;
}

@alga {refs.name} {
  .{refs.name} {
  
    .tedirDateInput {
      ref: cursor-default caretColor-transparent;
    }
  
    .pickerContent {
      ref: width-auto;
    }
  
    .tedirDateControl {
      ref: display-flex alignItems-center padding-0.75rem;
      
      .tedirDateStart svg,
      .tedirDateEnd svg {
        ref: pointerEvents-none;

        html[dir=rtl] & {
          ref: transform-rotate(180deg);
        }
      }
      
      .tedirDateCenter {
        ref: flexGrow-1 display-flex justifyContent-center gap-0.75rem px-0.75rem;
        
        .tedirDateMonth {
          ref: width-auto paddingLeft-0.75rem paddingRight-2.25rem;

          html[dir=rtl] & {
            ref: paddingRight-0.75rem paddingLeft-2.25rem;
          }
        }
        
        .tedirDateYear {
          ref: width-auto paddingLeft-0.75rem paddingRight-2.25rem;

          html[dir=rtl] & {
            ref: paddingRight-0.75rem paddingLeft-2.25rem;
          }
        }
      }
    }
    
    .tedirDateCalendar {
      ref: paddingBottom-0.75rem paddingLeft-0.75rem paddingRight-0.75rem fs-0.85rem;
    }
  }
}