/* YW Layout 2 — Кнопки */

/* Дефолтная */
.btn {
      padding: var(--main-padding) calc(var(--main-padding) * 2) !important; 
      border: 2px solid hsl(var(--color-white-h), var(--color-white-s), calc(var(--color-white-l) - 55%)); 
      background-color: hsl(var(--color-white-h), var(--color-white-s), calc(var(--color-white-l) - 65%)); 
      color: hsl(var(--color-white-h), var(--color-white-s), calc(var(--color-white-l) - 0%));
      margin-bottom: var(--main-margin); 
      cursor: pointer; 
      display: inline-block;
}
.btn:hover {
      border: 2px solid hsl(var(--color-white-h), var(--color-white-s), calc(var(--color-white-l) - 65%)); 
      background-color: hsl(var(--color-white-h), var(--color-white-s), calc(var(--color-white-l) - 75%)); 
      color: hsl(var(--color-white-h), var(--color-white-s), calc(var(--color-white-l) - 15%));
}

.small {font-size: 0.9em;}
.large {font-size: 1.3em;}
.btn-b {display: block; width: 100%; text-align: center;}

/* Прозрачная */
.btn-o {
      border: 2px solid rgba(255, 255, 255, 1); 
      background-color: rgba(255, 255, 255, 0); ; 
      color: rgba(255, 255, 255, 1); 
}
.btn-o:hover {
      border: 2px solid rgba(255, 255, 255, 1); 
      background-color: rgba(255, 255, 255, 0.1); ; 
      color: rgba(255, 255, 255, 1);
}
/* Информационная */
.info {
      border: 2px solid hsl(var(--color-blue-h), var(--color-blue-s), calc(var(--color-blue-l) + 0%)); 
      background-color: hsl(var(--color-blue-h), var(--color-blue-s), calc(var(--color-blue-l) - 15%)); 
      color: hsl(var(--color-blue-h), calc(var(--color-blue-s) - 100%), calc(var(--color-blue-l) + 45%));
}
.info:hover {
      border: 2px solid hsl(var(--color-blue-h), var(--color-blue-s), calc(var(--color-blue-l) - 10%)); 
      background-color: hsl(var(--color-blue-h), var(--color-blue-s), calc(var(--color-blue-l) - 20%)); 
      color: hsl(var(--color-blue-h), calc(var(--color-blue-s) - 100%), calc(var(--color-blue-l) + 50%));
}
.dark-mode .info {
     border: 2px solid hsl(var(--color-blue-h), var(--color-blue-s), calc(var(--color-blue-l) - 10%)); 
      background-color: hsl(var(--color-blue-h), var(--color-blue-s), calc(var(--color-blue-l) - 20%)); 
      color: hsl(var(--color-blue-h), calc(var(--color-blue-s) - 100%), calc(var(--color-blue-l) + 50%)); 
}
.dark-mode .info:hover {
      border: 2px solid hsl(var(--color-blue-h), calc(var(--color-blue-s) - 50%), calc(var(--color-blue-l) - 20%)); 
      background-color: hsl(var(--color-blue-h), calc(var(--color-blue-s) - 50%), calc(var(--color-blue-l) - 25%)); 
      color: hsl(var(--color-blue-h), calc(var(--color-blue-s) - 100%), calc(var(--color-blue-l) + 45%));
}



/* Внимание */
.warrning {border: 1px solid var(--main-bg-ui-border-warrning); background-color: var(--main-bg-ui-item-warrning); color: var(--main-ui-color-warrning);}
.warrning:hover {border: 1px solid var(--main-bg-ui-border-warrning-hover); background-color: var(--main-bg-ui-item-warrning-hover);}

/* Светлая */
.light {border: 1px solid var(--main-bg-ui-border-light); background-color: var(--main-bg-ui-item-light); color: var(--main-ui-color-light);}
.light:hover {border: 1px solid var(--main-bg-ui-border-light-hover); background-color: var(--main-bg-ui-item-light-hover);}

/* Темная */
.dark {border: 1px solid var(--main-bg-ui-border-dark); background-color: var(--main-bg-ui-item-dark); color: var(--main-ui-color-dark);}
.primary {border: 1px solid var(--main-bg-ui-border-primary); background-color: var(--main-bg-ui-item-primary); color: var(--main-ui-color-primary);}

/* Кастом */
.custom {border: 1px solid var(--main-bg-ui-border-custom); background-color: var(--main-bg-ui-item-custom); color: var(--main-ui-color-custom);}
.custom:hover {border: 1px solid var(--main-bg-ui-border-custom-hover); background-color: var(--main-bg-ui-item-custom-hover);}