.btn{ 
  align-items: center;
  background:var(--white);
  border:1px solid var(--gray-300);
  border-radius:var(--radius-md); 
  cursor:pointer;
  display: inline-flex;
  font: inherit; 
  height: 40px;    
  justify-content: center;     
  padding:10px 14px}
.btn.primary{ 
  background: var(--green-500); 
  color:white; 
  border-color: var(--green-500)}
.btn.red{
  color:var(--red-500);
  border-color: var(--red-500)
}
.btn.ghost,.btn[disabled]{background: transparent}
.btn:focus-visible{ 
  box-shadow: var(--focus-ring);
  outline:none}
@media (prefers-color-scheme: dark){
  .btn.secondary:not([disabled]){
    color: white;
  }
  .btn.ghost,
  .btn[disabled]{
    color: #aaaaaa; !important
  }
}  
/*icon buttons*/
.icon-btn{
  --btn: 40px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: var(--gray-900);
  cursor: pointer; 
  display: inline-flex;
  height: var(--btn);
  justify-content: center;
  padding: 0;
  transition: 
    background .2s ease, 
    border-color .2s ease, 
    box-shadow .2s ease, 
    transform .08s ease;
  width: var(--btn)}
.icon-btn:hover{
  background: var(--gray-100);
  border-color: var(--gray-500)}
.icon-btn:active{
  box-shadow: var(--shadow-sm);
  transform: scale(.98)}
.icon-btn:focus-visible{
  box-shadow: var(--shadow-sm), var(--focus-ring);
  outline: none}
.icon-btn[disabled]{
  cursor: not-allowed;
  opacity: .55}
/*red icon buttons  */
.icon-btn.red{
  border: 1px solid var(--red-500);
  color: var(--red-500)}
.icon-btn.red:hover{
  background: var(--red-100);
  border-color: var(--red-500)}
.icon-btn.red .icon{
  color: var(--red-500)}
/*switch button*/
.switch{
  --dot: 20px;
  --h: 26px;
  --w: 46px;
  display: inline-block;
  height: var(--h);
  position: relative;
  width: var(--w)}
.switch input{display:none}
.switch .slider{
  background: var(--gray-300);
  border-radius: var(--h);
  box-shadow: var(--shadow-sm);
  position:absolute; inset:0;
  transition: background .18s ease}
.switch .slider::after{
  background: var(--white);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  content:"";
  height: var(--dot);
  left:3px;
  position:absolute;
  transform: translateY(-50%); 
  transition: left .18s ease;
  top:50%; 
  width: var(--dot)}
.switch input:checked + .slider{
  background: var(--green-500)}
.switch input:checked + .slider::after{
  left: calc(var(--w) - var(--dot) - 3px)}