[data-block-name="avenue/resource-login-form"] {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;

  & form {
    display: flex;
    flex-wrap: wrap;
  }

  & .avenue-resource-login-form__status-container-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  & .wp-block-button .wp-block-button__link {
    padding-block: 8px !important;
  }

  & button {
    appearance: none;
    padding: 0;
    border-width: 0;
    background-color: transparent;

    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }

  & .avenue-resource-login-form__success-status {
    color: var(--wp--preset--color--secondary);
  }

  & .avenue-resource-login-form__error-status {
    color: var(--color-danger);
  }
}

[data-block-name="avenue/resource-login-form"] input {
  padding: 0.5rem;
  border: 1px solid var(--wp--preset--color--main);
  border-radius: 0;
  flex-grow: 1;
}

[data-block-name="avenue/resource-login-form"] form {
  display: flex;
  gap: 1rem;
}

.spinner {
  width: 50px;
  height: 1rem;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: var(--wp--preset--color--secondary);
  height: 100%;
  width: 6px;
  display: inline-block;

  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}

@keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}