@import "../base/color";
@import "../base/breakpoint";



.btn-primary
{
  height: 3rem;
  padding: 0.5vh 2vw 0.5vh 2vw;
  background-color: $gold;
  border: 1px solid rgba(227, 184, 42, 0.2);
  box-shadow: 0px 2px 6px #1E1C1C;
  border-radius: 2px;
  margin: 1rem 0 1rem 0;
  color: $text-black;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  text-transform: capitalize;
  

  &:hover {
    cursor: pointer;
    background-color: $gold-light;
    color: $dark;
  }
  &:active {
    position:relative;
    top:1px;
    background-color: #c59f1c;
  }

  &:focus {
    cursor: pointer;
    outline:none;
    
  }
}

.btn-secondary
{
  background-color: $gold-light;
  color: $text-black;
  height: 3rem;
  padding: 0.5vh 2vw 0.5vh 2vw;
  margin: 1rem 0 1rem 0;
  text-transform: capitalize;

  border: 1px solid rgba(227, 184, 42, 0.2);
  box-shadow: -2px -2px 6px rgba(227, 184, 42, 0.2), 2px 2px 6px #1E1C1C;
  border-radius: 6px;

  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 120%;
}

.btn-secondary-negative
{
  border: 1px solid $gold-light;
  height: 3rem;
  padding: 0.5vh 2vw 0.5vh 2vw;
  margin: 1rem 0 1rem 0;
  text-transform: capitalize;

  box-shadow: -2px -2px 6px rgba(227, 184, 42, 0.2), 2px 2px 6px #1E1C1C;
  border-radius: 6px;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 120%;

  color: #E0E0E0;
}

.btn-chevron
{
  margin: 1rem 1rem 1rem 0;
  color: rgb(255,255,255);
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  

  &:hover {
    cursor: pointer;
    color: white;
  }
}

.btn-long-string {
  height: 3rem;
  padding: 0.5vh 2vw 0.5vh 2vw;
  border: 1px solid #121212;
  box-sizing: border-box;
  border-radius: 2px;
  color: $text-color;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  margin: 1rem 0 1rem 0;
}


/*
.btn {
  height: 3rem;
  padding: 0.5vh 2vw 0.5vh 2vw;
  background-color: $gold;
  border: none;
  margin: 1rem 0 1rem 0;
  color: $text-black;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  text-transform: capitalize;
  &.active{
    opacity: 0.3;
  }
  &:hover {
    cursor: pointer;
    background-color: $gold-light;
    color: $dark;
  }
  &:active {
    position:relative;
    top:1px;
    background-color: #c59f1c;
  }
  .btn-content{
    display: inline-flex;
    align-items: center;
    .btn-icon{
      margin-right: 1.5vw;
    }
  }
}
*/