.button {
    all: unset;
    border-style: solid;
    border-width: 1px;
    border-radius: 0.5em;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.875rem;
    padding: 0.5em 1em;
    max-width: 100%;
    &.circle {
        align-items: center;
        border-radius: 50%;
        font-size: 0.75rem;
        justify-content: center;
        height: 1.5em;
        width: 0.5em;
        + form {
            display: inline-flex;
        }
    }
    i {
        + span {
            padding-left: 0.25em;
        }
    }
    &:hover {
        border-color: #555;
    }
}

nav {
    button[type="submit"] {
        all: unset;
        cursor: pointer;
        padding: 1em;
    }
}

.loading {
  position: relative;
  overflow: hidden;
}

.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: load 1.5s infinite;
}

@keyframes load {
  to { left: 100%; }
}