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

:focus {
  box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
}

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

:focus-visible,
:-moz-focusring {
  box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
}

:root {
  // Bulma sets this to "scroll" which gives us a scrollbar even if there's no content to scroll
  --body-overflow-y: auto;
}

body {
  background: var(--site-background);
  min-height: 100vh;
}

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

// FIXME: create <ProgressBar> component. used in
// - attachments.vue
// - kanban-card.vue
// - singleTaskInList.vue
.progress {
  border-radius: $radius-large;
	width: 50px;
	margin: 0 0.5rem 0 0;
	flex: 3 1 auto;

	&::-moz-progress-bar,
	&::-webkit-progress-value {
	  background: var(--grey-500);
	}

	@media screen and (max-width: $tablet) {
		margin: 0.5rem 0 0 0;
		order: 1;
		width: 100%;
	}
}

// FIXME: these helpers should be mixins
.has-no-border {
  border: none !important;
}

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

.has-overflow {
  overflow: visible !important;
}

.has-horizontal-overflow {
	overflow-y: hidden;
	overflow-x: auto;
}

// FIXME: this should be moved in a Avatar component
.image.is-avatar {
  border-radius: 100%;
}

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

// FIXME: merge with dropdown-item.vue
// for this to happen the component has to be used everywhere
.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: left !important;

  .icon {
    padding-right: .5rem;
  }

  .icon:not(.has-text-success) {
    color: var(--grey-300) !important;
  }

  &.has-text-danger .icon {
    color: var(--danger) !important;
  }

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

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

.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: var(--shadow-md);
}

.is-strikethrough {
  text-decoration: line-through;
}

.is-touch .handle {
	opacity: 1 !important;
}

.dragging-disabled .handle {
	opacity: 0 !important;
}

.box {
  border: 1px solid var(--grey-200);
  box-shadow: var(--shadow-sm);
}