/**
* Styling for buttons
*/

/* button style */
.rpgui-button {
  /* hide button default stuff */
  background-color: Transparent;
  background-repeat: no-repeat;
  border: none;
  overflow: hidden;
  outline: none;

  /* background */
  background: url("../assets/rpg/button.png") no-repeat no-repeat;
  background-clip: padding-box;
  background-origin: padding-box;
  background-position: center;
  background-size: 100% 100%;

  /* font size */
  font-size: clamp(0.8rem, 2vw, 1.2rem);

  /* default size and display */
  max-width: 100%;
  min-width: clamp(120px, 15vw, 180px);
  height: clamp(50px, 8vw, 70px);
  display: inline-block;

  /* padding */
  padding-left: clamp(25px, 4vw, 35px);
  padding-right: clamp(25px, 4vw, 35px);
}

/* button hover */
.rpgui-button.hover,
.rpgui-button:hover {
  background-image: url("../assets/rpg/button-hover.png");
}

/* button clicked */
.rpgui-button.down,
.rpgui-button:active {
  background-image: url("../assets/rpg/button-down.png");
}

/* golden button stuff */
.rpgui-button.golden p {
  display: inline-block;
}

/* golden button style */
.rpgui-button.golden {
  /* hide button default stuff */
  background-color: Transparent;
  background-repeat: no-repeat;
  border: none;
  overflow: hidden;
  outline: none;

  /* background */
  background: url("../assets/rpg/button-golden.png") no-repeat no-repeat;
  background-clip: padding-box;
  background-origin: padding-box;
  background-position: center;
  background-size: 100% 80%;

  /* font size responsive */
  font-size: clamp(0.8rem, 2vw, 1.2rem);

  /* default size and display */
  max-width: 100%;
  min-width: clamp(120px, 15vw, 180px);
  height: clamp(50px, 8vw, 70px);
  display: inline-block;

  /* padding */
  padding-top: 5px;
  padding-left: clamp(25px, 4vw, 35px);
  padding-right: clamp(25px, 4vw, 35px);
  overflow: visible;
}

/* button hover */
.rpgui-button.golden.hover,
.rpgui-button.golden:hover {
  background-image: url("../assets/rpg/button-golden-hover.png");
}

/* button clicked */
.rpgui-button.golden.down,
.rpgui-button.golden:active {
  background-image: url("../assets/rpg/button-golden-down.png");
}

.rpgui-button.golden:before {
  white-space: nowrap;
  display: inline-block;
  content: "";
  width: 34px;
  display: block;
  height: 110%;
  background: transparent url("../assets/rpg/button-golden-left.png") no-repeat
    right center;
  background-size: 100% 100%;
  margin: 0 0 0 0;
  left: 0px;
  float: left;
  margin-left: -46px;
  margin-top: -5%;
}

.rpgui-button.golden:after {
  white-space: nowrap;
  display: block;
  content: "";
  width: 34px;
  height: 110%;
  background: transparent url("../assets/rpg/button-golden-right.png") no-repeat
    left center;
  background-size: 100% 100%;
  margin: 0 0 0 0;
  right: 0px;
  float: right;
  margin-right: -46px;
  margin-top: -5%;
}

/*
.rpgui-button.golden:hover:before {

  background-image: url('img/button-golden-left-hover.png');
}

.rpgui-button.golden:hover:after {

  background-image: url('img/button-golden-right-hover.png');
}
*/

/* ========== MEDIA QUERIES PARA BOTÕES ========== */

@media screen and (max-width: 768px) {
  .rpgui-button {
    min-width: clamp(100px, 12vw, 140px);
    height: clamp(45px, 7vw, 60px);
    font-size: clamp(0.7rem, 1.8vw, 1rem);
  }
  
  .rpgui-button.golden {
    min-width: clamp(100px, 12vw, 140px);
    height: clamp(45px, 7vw, 60px);
    font-size: clamp(0.7rem, 1.8vw, 1rem);
  }
}

@media screen and (max-width: 480px) {
  .rpgui-button {
    min-width: clamp(90px, 20vw, 120px);
    height: clamp(40px, 10vw, 50px);
    font-size: clamp(0.6rem, 3vw, 0.9rem);
    padding-left: clamp(15px, 3vw, 25px);
    padding-right: clamp(15px, 3vw, 25px);
  }
  
  .rpgui-button.golden {
    min-width: clamp(90px, 20vw, 120px);
    height: clamp(40px, 10vw, 50px);
    font-size: clamp(0.6rem, 3vw, 0.9rem);
    padding-left: clamp(15px, 3vw, 25px);
    padding-right: clamp(15px, 3vw, 25px);
  }
}

@media screen and (max-width: 320px) {
  .rpgui-button {
    min-width: 80px;
    height: 35px;
    font-size: 0.7rem;
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .rpgui-button.golden {
    min-width: 80px;
    height: 35px;
    font-size: 0.7rem;
    padding-left: 10px;
    padding-right: 10px;
  }
}