.btn {
   border: 0;
   cursor: pointer;
   display: inline-block;
   font-family: $font-bernino;
   font-size: 14px;
   padding: .9rem 20px;
   text-transform: uppercase;
   text-align: center;
   touch-action: manipulation;
   transition: all .2s ease-in-out;
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
   @include underline-never;

   &:hover,
   &:focus,
   &:active {
      outline: 0;
   }
}

.btn-primary {
   background-color: $green;
   border: 2px solid $green;
   color: $white;

   &:hover,
   &:focus,
   &:active {
      background-color: darken($green, 10%);
      border-color: darken($green, 10%);
      color: $white;
   }

   &[disabled] {
      background: #cacaca;
      border-color: #b9b9b9;
      color: #7d8186;
   }
}

.btn-primary--gray {
   border-color: $brand-secondary;
   background-color: $brand-secondary;

   &:hover,
   &:focus,
   &:active {
      background-color: darken($brand-secondary, 10%);
      border-color: darken($brand-secondary, 10%);
   }
}

.btn-primary--yellow {
   border-color: $brand-primary;
   background-color: $brand-primary;

   &:hover,
   &:focus,
   &:active {
      background-color: darken($brand-primary, 10%);
      border-color: darken($brand-primary, 10%);
   }
}

.btn-primary--search {
   border-color: $brand-primary;
   background-color: $brand-primary;

   &:hover,
   &:focus,
   &:active {
      background-color: darken($brand-primary, 10%);
      border-color: darken($brand-primary, 10%);
   }
}

.btn-outlined {
   border: 2px solid $border-color;
   color: $gray-dark;
   background: transparent;

   &:hover,
   &:focus,
   &:active {
      color: $white;
      background: $purple;
      border-color: $purple;
   }
}

.btn-outlined--yellow {
   color: $white;
   border-color: $yellow;

   &:hover,
   &:focus,
   &:active {
      background: $yellow;
      border-color: $yellow;
   }
}

.btn-outlined--search {
   color: $white;
   border-color: $yellow;

   &:hover,
   &:focus,
   &:active {
      background: $yellow;
      border-color: $yellow;
   }
}

.btn-outlined--pink {

   &:hover,
   &:focus,
   &:active {
      background: $pink;
      border-color: $pink;
   }
}

.btn-outlined--4 {

   &:hover,
   &:focus,
   &:active {
      background: $gender-child;
      border-color: $gender-child;
   }
}

.btn-outlined--purple {

   &:hover,
   &:focus,
   &:active {
      background: $purple;
      border-color: $purple;
   }
}

.btn-outlined--green {

   &:hover,
   &:focus,
   &:active {
      background: $green;
      border-color: $green;
   }
}

.btn-outlined--2 {

   &:hover,
   &:focus,
   &:active {
      background: $gender-male;
      border-color: $gender-male;
   }
}


/* "tagy" vyrobci, kategorie na detailu produktu */
.btn-tag {
   display: inline-block;
   border: 1px solid $border-color;
   padding: 6px 15px;
   margin: 2px;
   @include underline-never;

   &:hover,
   &:active,
   &:focus {
      background: $gray-dark;
      color: $white;
   }

   &.btn-tag-lg {
      padding: 15px 30px;
      margin: 0 2px 10px;
   }
}

.btn-nextstep {
   letter-spacing: .06em;
   font-weight: 700;
   color: $white;
   border-color: $green;
   background-color: $green;

   &:hover,
   &:focus,
   &:active {
      background-color: darken($green, 10%);
      border-color: darken($green, 10%);
   }
}

.btn-prevstep {
   font-weight: 700;
   letter-spacing: .06em;
}

.btn-lg {
   font-size: 16px;
   font-weight: 700;
   padding: 18px 32px;
}

.btn-sm {
   padding: 5px 10px 4px;
   border: none;
}

.btn-block {
   display: block;
   width: 100%;
}

.btn-block + .btn-block {
   margin-top: 5px;
}

input[type="submit"],
input[type="reset"],
input[type="button"] {
   &.btn-block {
      width: 100%;
   }
}

.btn-fcb {
   background-color: #3b5999;
   border-color: #3b5999;
   margin-bottom: 10px;
   white-space: normal;
   padding: 20px;
   display: none;

   span {
      margin: 0 15px 0 -15px;
      font-size: 20px;
   }

   &:hover,
   &:active,
   &:focus {
      border-color: darken(#3b5999, 10%);
      background-color: darken(#3b5999, 10%);
   }

   @media screen and (max-width: 370px) {
      font-weight: 400;
      padding: 15px 0;

      span {
         margin: 0;
         font-size: 18px;
      }
   }
}

.btn.btn-secondary {
   background-color: $brand-secondary;
   border-color: $brand-secondary;
   color: $white;

   &:hover,
   &:focus,
   &:active {
      background-color: darken($brand-secondary, 10%);
      border-color: darken($brand-secondary, 10%);
      color: $white;
   }
}
