@import 'base';

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: url('../img/bg.png') repeat;
  background-size: 40px 164px;

  > .main-content {
    flex: 1;
  }
}

.header {
  padding-top: 20px;
  padding-left: .75rem;
  padding-right: .75rem;

  @include tablet {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  @include desktop {
    > .container {
      .navbar-brand {
        margin-left: 0;

        .navbar-item {
          padding-left: 0;
        }
      }
    }
  }

  .navbar-brand {
    align-items: center;
  }

  @include mobile {
    .navbar-menu {
      text-align: center;
    }
  }

  .logo {
    height: 40px;
  }
}

.title {
  transition: color .15s ease-in-out;
}

.input {
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.button {
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  font-weight: $weight-bold;

  &.is-primary.is-outlined {
    background-color: rgba($primary, .104);

    &.is-loading:focus {
      background-color: rgba($primary, .104);

      &::after {
        border-color: transparent transparent $primary $primary !important;
      }
    }
  }

  &.is-loading {
    &::after {
      border-radius: 100%;
    }
  }
}

.box {
  border: 1px solid #393939;
}

.ceremony {
  text-align: center;

  .title {
    color: $white;

    span {
      color: $primary;
    }
  }

  .p {
    font-size: .857rem;
    max-width: 66.6666%;
    margin: 0 auto;

    &:not(:last-child) {
      margin-bottom: $block-spacing;
    }

    a {
      color: $primary;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .columns:not(:last-child) {
    margin-bottom: calc(2.5rem - 0.75rem);
  }

  .box {
    height: 100%;
    display: flex;
    flex-direction: column;

    &:hover, &.is-hovered {
      color: $primary;
      border-color: #94febf;

      .title {
        color: $primary;
      }

      .cloak {
        path {
          transition: stroke .15s ease-in-out;
          stroke: $primary;
        }
      }
    }

    .cloak {
      align-self: center;
    }

    .buttons {
      flex-grow: 1;
    }

    .button.is-fullwidth + .button.is-fullwidth {
      margin-top: 1rem;
    }
  }

  .field {
    .label {
      text-align: left;
    }
  }
}

.status {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  &:not(:last-child) {
    margin-bottom: $block-spacing;
  }

  .status-spinner {
    margin-top: 1.5rem;
    &:after {
      content: '';
      display: block;
      height: 40px;
      width: 40px;
      background-image: url('../img/logo.svg');
      animation: spinAroundReverse 2000ms infinite linear;
    }
  }

  .status-message {
    color: $primary;
    text-align: center;

    &.is-danger {
      color: $danger;
    }
  }
}

@keyframes spinAroundReverse {
  from {
    transform: rotate(359deg); }
  to {
    transform: rotate(0deg); }
}