@charset "UTF-8";

.l-login-x__btn {
  display: -ms-inline-flexbox;
  display: inline-flex;
  background: #000;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  padding: .5rem .625rem;
  border: #000 2px solid;
  min-height: 3.75rem;
  width: 100%;
  transition: color .3s, background .3s;
  position: relative;
}

.l-login-x__btn > span:not(.invisible) {
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  margin-left: 10px;
  margin-right: 30px;
}

.l-login-x__btn > span:not(.invisible):after {
  content: "";
  width: 2px;
  height: calc(100% + 4px);
  background: rgba(255, 255, 255, .2);
  position: absolute;
  left: 60px;
  top: -2px;
}

.l-login-x__btn:before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  transition: background .3s;
  background-color: #fff;
  -webkit-mask-image: url(../img/v6_ico_x.svg);
  mask-image: url(../img/v6_ico_x.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: auto;
}

.section:has(.l-login-x__btn) {
  margin-top: 1rem;
}

@media print and (hover: hover) and (pointer: fine),
screen and (min-width: 576px) and (hover: hover) and (pointer: fine) {
  .l-login-x__btn:hover {
    background: #fff;
    color: #000;
  }
  .l-login-x__btn:hover:before {
    background-color: #000;
  }
}

@media print, screen and (min-width: 576px) {
  .l-login-x__btn {
    max-width: 320px;
  }
}