/*
** Buttons
 */
.btn:hover {
  cursor: pointer;
}
form{
  .btn +.btn{
    @media (min-width: 576px) {
      margin-left: 20px;
    }

    @media(max-width: 374px){
      margin-top: 10px;
    }
  }
}
.btn.focus,
.btn:focus {
  box-shadow: 0 0 3px 0 rgba(100, 100, 100, .75);
}

.btn-secondary {
  border-color: $borderColor;
  color: $darkgreyColor;
}

/*color background buttons*/
.btn.btn-square{
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  color: $darkgreyColor;
  border: 3px solid $darkgreyColor;
  background-color: transparent;
  transition: all .3s ease-in-out;
  min-width: unset;
  &:hover{
    background-color: $darkgreyColor;
    color: $lightColor;
  }
}
.btn.btn-circle{
  background-color: transparent;
  border: 2px solid $lightColor;
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  min-width: unset;
  padding: 5px;
  font-size: 12px;
  color: $lightColor;
  transition: all .3s ease-in-out;
  &:hover{
    background-color: $lightColor;
    color: $colorMain2;
  }
}
.btn-maincolor,
.btn-maincolor2,
.btn-maincolor3,
.btn-maincolor4,
.btn-darkgrey {
  color: $lightColor;
}

.btn-maincolor {
  background-color: $colorMain;
  border: 3px solid $colorMain;
}

.btn-maincolor2 {
  background-color: $colorMain2;
  border: 3px solid $colorMain2;
}

.btn-maincolor3 {
  background-color: $colorMain3;
  border: 3px solid $colorMain3;
}

.btn-maincolor4 {
  background-color: $colorMain4;
  border: 3px solid $colorMain4;
}

.btn-darkgrey {
  background-color: $darkgreyColor;
  border: 3px solid $darkgreyColor;
}

/*color outline buttons*/
.btn-outline-maincolor,
.btn-outline-maincolor2,
.btn-outline-maincolor3,
.btn-outline-maincolor4{
  background-color:transparent;
  border: 3px solid transparent;
}

.btn-outline-darkgrey{
  color:$colorMain;
  border: 3px solid $darkgreyColor;
}
.btn-outline-maincolor {
  border-color: $colorMain;
  color: $colorMain;
}

.btn-outline-maincolor2 {
  border-color: $colorMain2;
  color: $colorMain2;
}

.btn-outline-maincolor3 {
  border-color: $colorMain3;
  color: $colorMain3;
}

.btn-outline-maincolor4 {
  border-color: $colorMain4;
  color: $colorMain4;
}

.btn-outline-darkgrey {
  color: $darkgreyColor;
  border-color: $darkgreyColor;
  background: transparent;
}