/*
Theme Name: StepUpTema
Theme URI:
Author: Emil Hajjar Thøgersen
Author URI:
Description:
Version: 2.0
*/


::selection {
  background: #FFCA28;
}
::-moz-selection {
  background: #FFCA28;
}

body.login {
  background-color: #121212;
}

.login form {
  background-color: #242424;
  border: 0;
  border-radius: 4px;
  box-shadow: 0px 4px 6px rgba(0,0,0,0.16);
  margin-top: 30px;
  position: relative;
  overflow: visible;
  color: #e2e2e2;
  padding: 28px 28px 60px;
}

.login #login_error {
  background-color: #242424;
  border-radius: 4px;
  box-shadow: 0px 4px 6px rgba(0,0,0,0.16);
  padding: 28px;
  color: #e2e2e2;
}

.login #login_error strong {
  letter-spacing: 0.4px;
  color: #dc3232;
}

.login label {
  margin-bottom: 0;
}

.login form::before {
  content: "";
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100vw;
  background-color: #161616;
  z-index: -1;
}

.login h1 a, .login .button.wp-hide-pw .dashicons {
  display: none;
}

body #login {
  padding-top: 260px;
  width: 400px;
}


.sum-logo {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  top: 120px;
}

.sum-logo a {
	position: relative;
	display: inline-block;
}

.sum-logo a::before {
	pointer-events: none;
	position: absolute;
	content: '';
	bottom: -30px;
	left: 5%;
	height: 10px;
	width: 90%;
	filter: alpha(opacity=0);
	opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: -webkit-radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: -moz-radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: -o-radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
	-o-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-o-transition-property: transform, opacity;
	-ms-transition-property: transform, opacity;
	-webkit-transition-property: transform, opacity;
	transition-property: transform, opacity;
}

.sum-logo a:hover::before,
.sum-logo a:focus::before,
.sum-logo a:active::before {
	filter: alpha(opacity=100);
	opacity: 1;
}

.sum-logo span {
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
  display: block;
}

.sum-logo span img {
  width: 320px;
}

.sum-logo a:hover span,
.sum-logo a:focus span,
.sum-logo a:active span {
	-o-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	-webkit-transform: translateY(-5px);
	transform: translateY(-5px);
}

.wp-core-ui .button-primary, #language-switcher .button {
  background: #FFCA28;
  border-color: #FFCA28;
  color: #242424;
  transition: 250ms ease 0ms;
  padding: 0 28px !important;
  font-weight: bold;
  outline: none;
}

.wp-core-ui .button-primary:hover, #language-switcher .button:hover {
  background: #FFC107;
  border-color: #FFC107;
  color: #242424;
  transform: translateY(2px);
}

.wp-core-ui .button-primary:active {
  background: #FFC107;
  border-color: #FFC107;
  color: #242424;
}

.login #backtoblog a, .login #nav a {
  transition: 250ms ease 0ms;
}

.login #backtoblog a:hover, .login #nav a:hover, .login h1 a:hover {
  color: #FFCA28;
}

.login form .input, .login input[type=password], .login input[type=text] {
  display: inline-block;
  width: 100%;
  padding: 10px 0 10px 28px;
  background: #efefef;
  border: 0;
  border-radius: 3px;
  outline: 0;
  text-indent: 90px;
  transition: all 250ms ease-in-out;
  line-height: 1;
  box-shadow: none;
  font-size: 16px;
  margin-bottom: 30px;
}

.login form .input::-webkit-input-placeholder {
  color: #efefef;
  text-indent: 0;
  font-weight: 300;
}

.login form p,
.login form .user-pass-wrap {
  position: relative;
}

.login form p:not(.forgetmenot) label,
.login form .user-pass-wrap label {
  display: inline-block;
  position: absolute;
  width: 82px;
  top: 0;
  left: 0;
  padding: 10px 15px;
  text-shadow: 0 1px 0 rgba(19,74,70,.4);
  background: #1c1c1c;
  transition: all .3s ease-in-out;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  transform-origin: left bottom;
  z-index: 99;
  pointer-events: none;
}
.login form p:not(.forgetmenot) label::before,
.login form .user-pass-wrap label::before,
.login form p:not(.forgetmenot) label::after,
.login form .user-pass-wrap label::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 3px;
  background: #1c1c1c;
  transform-origin: left bottom;
  transition: all .3s ease-in-out;
  pointer-events: none;
  z-index: -1;
}

.login form p:not(.forgetmenot) label::before,
.login form .user-pass-wrap label::before {
  background: rgba(0,0,0,.4);
  z-index: -2;
  right: 20%;
}

.login form .input:focus,
.login form .input:active {
  color: #606060;
  text-indent: 0;
  background: #fff;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.login form .input:focus::-webkit-input-placeholder,
.login form .input:active::-webkit-input-placeholder {
  color: #aaa;
}


.login form .hovered label,
.login form .hovered label {
  transform: rotate(-10deg);
  border-radius: 3px;
}

.login form .clicked label,
.login form .clicked label {
  transform: rotate(-66deg);
  border-radius: 3px;
}

.login form .clicked label::before,
.login form .clicked label::before {
  transform: rotate(10deg);
}

#login .forgetmenot {
  position: relative;
}

#login .forgetmenot input#rememberme {
  position: absolute;
  top: 7px;
  left: 3px;
  height: 20px;
  width: 20px;
  -webkit-apperance: none;
}

#login .forgetmenot label {
  display: flex;
  position: relative;
  font-size: 14px;
  align-items: center;
  justify-content: flex-start;
  transition: 250ms ease;
}

#login .forgetmenot label::before,
#login .forgetmenot label::after {
  pointer-events: none;
}

#login .forgetmenot label::before {
  display: flex;
  content: "";
  height: 20px;
  width: 20px;
  border-radius: 4px;
  border: 2px solid #1c1c1c;
  background-color: #121212;
  margin-right: 10px;
  transition: 200ms ease;
}

#login .forgetmenot label::after {
  position: absolute;
  top: 7px;
  left: 5px;
  display: flex;
  content: "";
  height: 5px;
  width: 12px;
  background: none;
  transform: scale(0) rotate(-45deg);
  transition: 200ms ease;
  transform-origin: center center;
  opacity: 0;
  border-bottom: solid 3px white;
  border-left: 3px solid white;
}

#login .forgetmenot input#rememberme:checked + label::after {
  transform: scale(0.8) rotate(-45deg);
  opacity: 1;
}

#login .forgetmenot:hover label::before {
  transform: scale(1.1);
}

#login .forgetmenot:hover input#rememberme:checked + label::after {
  transform: scale(0.9) rotate(-45deg);
}

#login .forgetmenot:hover label {
  color: #FFCA28;
}

#language-switcher-locales {
  border: none;
  background-color: #242424;
  color: white;
}

@media (prefers-color-scheme: light) {
  body.login {
    background-color: #ffffff;
  }

  #language-switcher-locales  {
    background-color: #fff;
    color: #2c3338;
  }

  .login label {
    color: #666;
  }

  .login form::before {
    background-color: #f8f8f8;
  }

  .sum-logo span {
    background-image: url(/wp-content/themes/stepupmedia/library/img/logo-stepup-2.png);
    background-size: contain;
    background-repeat: no-repeat;
  }

  .sum-logo span img {
    opacity: 0;
  }

  .login form, .login #login_error {
    background-color: white;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.08);
    color: #666;
  }

  .login form .input, .login input[type=password], .login input[type=text] {
    border: 1px solid #ededed;
    background: #f8f8f8;
  }

  #login .forgetmenot label::before {
    border: 2px solid #ededed;
    background-color: white;
  }

  .login form .input:focus, .login form .input:active {
    background: #f8f8f8;
  }

  #login .forgetmenot label::after {
    border-bottom: solid 3px #666;
    border-left: 3px solid #666;
  }

  .login form p:not(.forgetmenot) label::before,
  .login form .user-pass-wrap label::before,
  .login form p:not(.forgetmenot) label::after,
  .login form .user-pass-wrap label::after,
  .login form p:not(.forgetmenot) label,
  .login form .user-pass-wrap label {
    background: #efefef;
  }

  .login form p:not(.forgetmenot) label::before,
  .login form .user-pass-wrap label::before {
    background: rgba(0,0,0,.2);
  }
}