@import "lb-vars";

// Elementos reutilizables

div.displayPrecio {
   display: inline-block;
   vertical-align: top;
   color: @color-precio;
   font-size: 1.3rem;
   font-family: @font-price;

   span {
      display: inline-block;
      vertical-align: top;
      font-weight: normal;

      &.dpEnt {
         font-size: 1em;
      }

      &.dpDec, &.dpMon {
         padding-top: 2.5px;
         font-size: 0.58em;
      }

      &.dpDec {
         margin-left: 1px;
      }

      &.dpMon {
         margin-left: 3px;
      }
   }

   &.displayPrecioTachado {
      color: @color-precio-tachado;
      text-align: left;

      span {
         &.dpEnt, &.dpDec, &.dpMon {
            text-decoration: line-through;
         }

         &.dpEnt {
            font-size: 0.8em;
         }

         &.dpDec, &.dpMon {
            padding-top: 2.5px;
            font-size: 0.5em;
         }

         &.dpDto {
            display: block;
            color: @color-precio-dto;
            font-size: 0.5em;
            margin-top: -6px;
         }
      }
   }
}




// Botón amarillo de compras
div.res_boton_grafico_formulario {
   position: relative;
   width: auto;
   height: 25px;
   margin: 0 auto 8px auto;
   cursor: pointer;

   input {
      display: inline-block;
      margin: 0;
      height: 25px;
      padding: 0 1.5rem 0 1.5rem;
      color: @color-button1;
      background-color: @color-button1-bg;
      border: none;
      border-radius: 12px;
      font-size: 0.8rem;
      cursor: pointer;

      &:focus {
         outline: none;
      }

      &:hover {
         color: @color-button1-hover;
         background-color: @color-button1-bg-hover;
      }
   }


   &.bgf-modo2 { // Verde
      input {
         color: @color-button1-modo2;
         background-color: @color-button1-modo2-bg;

         &:hover {
            background-color: @color-button1-modo2-bg-hover;
         }
      }
   }


   &.bgf-modo4,
   &.bgf-modo4b, // Texto plano, con márgen
   &.bgf-modo5 { // Texto blanco
      input {
         font-size: 0.85rem;
         color: @color-button1-modo4;
         background-color: @color-button1-modo4-bg;

         &:hover {
            text-decoration: underline;
            color: @color-button1-modo4-hover;
            background-color: @color-button1-modo4-bg-hover;
         }
      }
   }

   &.bgf-modo4b { // Texto plano, sin margen
      input {
         padding: 0 1.5rem 0 0;
      }
   }

   &.bgf-modo5 {
      input {
         color: @color-button1-modo5;
         &:hover {
            color: @color-button1-modo5-hover;
         }
      }
   }
}




// Botón secundario (Basado en <a>)
div.MildTextButton {
   height: 18px;

   > a {
      display: flex;
      align-items: center;
      justify-content: center;
      //height: 25px;
      //padding: 0 1.4em 0 1.4em;
      border-radius: 12px;
      background-color: @color-button2-bg;
      font-size: 0.85rem;
      font-family: @font-button;

      &:hover {
         color: @color-button2-hover;
         background-color: @color-button2-bg-hover;
         text-decoration: underline;
      }

      > span {
         display: block;
         width: 100%;
         text-align: left;
         vertical-align: middle;
         color: @color-button2 !important;
      }
   }

   &.mtb-modo2 {
      display: inline-block;

      > a {
         padding: 0 1em 0 1em;
         background-color: @color-main-60;

         &:hover {
            background-color: @color-main-70;
            text-decoration: none;
            > span {
               color: @color-main-100 !important;
            }
         }

         > span {
            text-align: center;
            color: @color-main-100 !important;
         }
      }
   }
}