.circle {
  border-radius: 50%;
  width: 100%;
  height: auto;
}

.align-left {
  @include clearfix();
  float: left;
  margin-right: 1.5em;
}

.align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.align-right {
  @include clearfix();
  float: right;
  margin-left: 1.5em;
}

.btn {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  margin: 0.4rem;
  font-size: 0.5rem;
  font-weight: 400;
  background-color: darken($white, 7%);
  color: lighten($black, 20%);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  &:hover {
    background-color: mix($gray, $blue, 40%);
    color: darken($white, 5%);
  }
  &_info {
    background-color: lighten($aqua, 10%);
    &:hover {
      background-color: darken($aqua, 5%);
    }
  }
  &_warning {
    background-color: lighten($yellow, 10%);
    &:hover {
      background-color: darken($yellow, 5%);
    }
  }
  &_success{
    background-color: lighten($green, 10%);
    &:hover {
      background-color: darken($green, 5%);
    }
  }
  &_danger {
    background-color: lighten($red, 10%);
    &:hover {
      background-color: darken($red, 5%);
    }
  }
}

@media (prefers-color-scheme: dark) {
  .btn {
    background-color: lighten($black, 30%);
    color: lighten($white, 20%);
    &:hover {
      color: lighten($black, 5%);
    }
    &_info {
      background-color: darken($aqua, 5%);
      &:hover {
        background-color: darken($aqua, 10%);
      }
    }
    &_warning {
      background-color: darken($yellow, 5%);
      &:hover {
        background-color: darken($yellow, 10%);
      }
    }
    &_success{
      background-color: darken($green, 5%);
      &:hover {
        background-color: darken($green, 10%);
      }
    }
    &_danger {
      background-color: darken($red, 5%);
      &:hover {
        background-color: darken($red, 10%);
      }
    }
  }
}

@mixin notice($notice-color) {
  padding: 0.75rem;
  margin: 1.5em 0;
  text-indent: initial;
  background-color: mix(#ddd, $notice-color, 73%);
  border-radius: 0;
  box-shadow: 0 1px 1px rgba($notice-color, 0.25);
  @media (prefers-color-scheme: dark) {
    background-color: mix(#333, $notice-color, 65%);
  }
  h4 {
    margin-top: 0 !important;
    margin-bottom: 0.75rem;
  }
  p {
    &:last-child {
      margin-bottom: 0 !important;
    }
  }
  h4 + p {
    margin-top: 0;
    padding-top: 0;
  }
  code {
    background-color: mix(#fff, $notice-color, 73%);
    @media (prefers-color-scheme: dark) {
      background-color: mix(#111, $notice-color, 65%);
    }
  }
  ul {
    &:last-child {
      margin-bottom: 0; 
    }
  }
}

.notice {
  @media (prefers-color-scheme: light) {
    @include notice(darken($white, 30%));
  }
  @media (prefers-color-scheme: dark) {
    @include notice(lighten($black, 40%));
  }
  &_info {
    @include notice($aqua);
  }
  &_warning {
    @include notice($yellow);
  }
  &_success {
    @include notice($green);
  }
  &_danger {
    @include notice($red);
  }
}
