@import '@/styles/style-helpers.scss';
@import '@/styles/media-queries.scss';

/* Essential global page layout styles */
html {
  padding: 0;
  margin: -3px 0 0 0;
  transition: all 1s;
  @extend .scroll-bar;
  @extend .highlight;
  box-sizing: border-box;
  /* Essential body styles */
  body {
    background: var(--background);
    margin: 0;
    padding: 0;
  }
  /* Make links have pointy cursor */
  input[type=button], button, a {
    cursor: pointer;
  }
}

/* Overriding styles for the modal component */
.vm--modal, .dashy-modal {
  box-shadow: 0 40px 70px -2px hsl(0deg 0% 0% / 60%), 1px 1px 6px var(--primary) !important;
  min-width: 350px;
  min-height: 200px;

  @include phone {
    left: 0.5rem !important;
    right: 0.5rem !important;
    width: 95% !important;
    top: 2rem !important;
  }
}
.vm--overlay {
  background: #00000080;
}

/* Overiding styles for the global toast component */
.toast-message {
  background: var(--toast-background) !important;
  color: var(--toast-color) !important;
  border: 1px solid var(--toast-color) !important;
  border-radius: var(--curve-factor) !important;
  font-size: 1.25rem !important;
}
.toast-error {
  background: var(--danger) !important;
  color: var(--white) !important;
  font-size: 1.25rem !important;
}
.toast-success {
  background: var(--success) !important;
  color: var(--white) !important;
  font-size: 1.25rem !important;
}

/* v-select, dropdown styles */
.v-select {
  .vs__dropdown-toggle {
    border-color: var(--primary);
    background: var(--background);
    cursor: pointer;
    span.vs__selected {
      color: var(--primary);
    }
    .vs__actions svg path { fill: var(--primary); }
  }
  ul.vs__dropdown-menu {
    background: var(--background);
    border-color: var(--primary);
    li {
      color: var(--primary);
      &:hover {
        color: var(--background);
        background: var(--primary);
      }
      &.vs__dropdown-option--highlight {
        color: var(--background);
        background: var(--primary);
      }
    }
  }
}