$alert-danger: rgb(202, 60, 60);

a:hover {
  cursor: pointer;
}

form.pure-form-brewed {
  div.has-error {
    color: $alert-danger;

    input, input:focus {
      border-color: $alert-danger;
    }
  }
}

ul.pagination {
  margin-top: 1rem;
  margin-bottom: 1rem;

  li button {
    background-color: transparent;
    color: black;

    &:disabled {
      color: rgba(0, 0, 0, .54);
    }

    &:hover:not(:disabled) {
      background-color: #7e69c6;
    }

    i {
      margin: 0; 
    }
  }

  li a:hover {
    background-color: #7e69c6;
  }
}

table {
  position: relative;

  &.loading::after {
    content: '';
    position: absolute;
    background-color: rgba(255, 255, 255, .5);
    top: 0;
    height: 100%;
    width: 100%;
  }

  th button {
    background-color: thistle;
    border-radius: .25rem;

    i {
      margin-right: none;
      margin-left: .5rem;
    }
  }
}

tbody tr.updating td:first-child, table.loading thead:first-child {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    background: linear-gradient(to right, white, #7e69c6);
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    padding: 1px 0;
    animation-duration: 2s;
    animation-name: load;
    animation-iteration-count: infinite;
  }
}

@keyframes load {
  from {
    width: 30%;
  }

  to {
    width: 100%;
  }
}