@import '../../../node_modules/bulma/bulma';

@import 'fonts';

@import 'variables-derived';

*, *:hover, *:active, *:focus {
  outline: none;
}

:focus {
  box-shadow: 0 0 0 2px rgba($primary, 0.5);
}

:focus:not(:focus-visible) {
  outline: 0;
}

:focus-visible, :-moz-focusring {
  box-shadow: 0 0 0 2px rgba($primary, 0.5);
}

body {
  background: url('../../public/images/llama.svg') no-repeat bottom left fixed $light-background;
  min-height: 100vh;

  @media screen and (max-width: $tablet) {
    &:not(.has-llama) {
      background: $light-background;
    }
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: $vikunja-font;
  font-weight: 400 !important;
}

.logo {

  padding-left: 2rem !important;

  img {
    max-height: 3rem !important;
    margin-right: 1rem;
  }
}

.progress {
  border-radius: $radius-large;
}

.has-no-border {
  border: none !important;
}

.has-rounded-corners {
  border-radius: $radius;
}

.image.is-avatar {
  border-radius: 100%;
}

button.table {
  margin-bottom: 0 !important;
}

.dropdown-item.is-disabled {
  cursor: not-allowed;

  &:hover {
    background-color: transparent;
  }
}

.pagination {
  padding-bottom: 1em;

  .pagination-previous, .pagination-next {
    &:not(:disabled):hover {
      background: $button-background-color;
      cursor: pointer;
    }
  }
}

.is-max-width-desktop {
  width: 100%;
  max-width: $desktop;
  margin: 0 auto;
}

.has-no-shadow {
  box-shadow: none !important;
}

.is-fullwidth {
  width: 100%;
}

.color-bubble {
  display: inline-block;
  border-radius: 100%;
  margin-right: 4px;
}