@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: $light-background;
  min-height: 100vh;
}

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;
}

.has-overflow {
  overflow: visible;
}

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

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

.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: left !important;

  .icon {
    padding-right: .5rem;
    color: $grey-300 !important;
  }

  &.has-text-danger .icon {
    color: $danger !important;
  }

  &.is-disabled {
    cursor: not-allowed;

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

.pagination {
  padding-bottom: 1rem;

  .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 {
  &,
  &.is-hovered,
  &:hover,
  &.is-active,
  &.is-focused,
  &:active,
  &:focus,
  &:focus:not(:active) {
    box-shadow: none !important;
  }
}

.is-fullwidth {
  width: 100%;
}

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

.dropdown-menu {
  .dropdown-content {
    box-shadow: $shadow-md;
  }
}