@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

.retro-btn {
  background: @retroButtonBackground;
  display: inline;
  position: relative;
  text-align: center;
  padding: @buttonPadding;
  font-family: "Press Start 2P";
  text-decoration: none;
  box-shadow: inset (-@retroShadowWidth) (-@retroShadowWidth) 0px 0px
    @retroShadowColor;

  &:hover,
  &:focus {
    background: @retroSecButtonBackground;
    box-shadow: inset (-@retroShadowWidth*1.5) (-@retroShadowWidth*1.5) 0px 0px
      @retroShadowColor;
  }

  &:active {
    box-shadow: inset @retroShadowWidth @retroShadowWidth 0px 0px
      @retroShadowColor;
  }

  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: content-box;
    top: -@retroOutlineWidth !important;
    left: 0;
    border-top: @retroOutlineWidth black solid !important;
    border-bottom: @retroOutlineWidth black solid !important;
  }

  &:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: content-box;
    left: -@retroOutlineWidth !important;
    top: 0;
    border-left: @retroOutlineWidth black solid !important;
    border-right: @retroOutlineWidth black solid !important;
  }

  &-reset {
    background: @retroResetButtonBackground;
    font-family: "Press Start 2P";
    box-shadow: inset (-@retroShadowWidth) (-@retroShadowWidth) 0px 0px
      @retroResetShadowColor;

    &:hover,
    &:focus {
      background: @retroResetSecButtonBackground;
      box-shadow: inset (-@retroShadowWidth*1.5) (-@retroShadowWidth*1.5) 0px
        0px @retroResetShadowColor;
    }

    &:active {
      box-shadow: inset @retroShadowWidth @retroShadowWidth 0px 0px
        @retroResetShadowColor;
    }
  }

  &-proceed {
    background: @retroAltButtonBackground;
    font-family: "Press Start 2P";
    box-shadow: inset (-@retroShadowWidth) (-@retroShadowWidth) 0px 0px
      @retroAltShadowColor;

    &:hover,
    &:focus {
      background: @retroSecAltButtonBackground;
      box-shadow: inset (-@retroShadowWidth*1.5) (-@retroShadowWidth*1.5) 0px
        0px @retroAltShadowColor;
    }

    &:active {
      box-shadow: inset @retroShadowWidth @retroShadowWidth 0px 0px
        @retroAltShadowColor;
    }
  }
}