@import "node_modules/bulma/bulma";

/* override styles for when the div is collapsed */
div.reminderContent.is-collapsed .column.discord-frame {
  display: none;
}

div.reminderContent.is-collapsed .column.settings {
  display: none;
}

div.reminderContent.is-collapsed .reminder-settings {
  margin-bottom: 0;
}

div.reminderContent.is-collapsed .button-row {
  display: none;
}

div.reminderContent.is-collapsed .button-row-edit {
  display: none;
}

div.reminderContent.is-collapsed .reminder-topbar {
  padding-bottom: 0;
}

div.reminderContent.is-collapsed .invert-collapses {
  display: inline-flex;
}

div.reminderContent .invert-collapses {
  display: none;
}

div.reminderContent.is-collapsed input[name="name"] {
  display: inline-flex;
  flex-grow: 1;
  border: none;
  background: none;
  box-shadow: none;
  opacity: 1;
}

div.reminderContent.is-collapsed .hide-box {
  display: inline-flex;
}

div.reminderContent.is-collapsed .hide-box i {
  transform: rotate(90deg);
}

.button.is-success:not(.is-outlined) {
  color: white;
}

.button.is-outlined.is-success:not(.is-focused, :hover, :focus) {
  background-color: white;
}

@import "vars";

.scheme-light {
  background-color: $primary-background-light;
  color: $primary-text-light;

  .column.is-main-content {
    background-color: $primary-background-light;
  }

  .reminderContent {
    background-color: $secondary-background-light;
  }
}

.scheme-dark {
  background-color: $secondary-background-dark;
  color: $primary-text-dark;

  .column.is-main-content {
    background-color: $secondary-background-dark;
  }

  .reminderContent {
    background-color: $primary-background-dark;
    color: $primary-text-dark;
  }

  .title,
  .subtitle,
  .label,
  .help,
  strong {
    color: $primary-text-dark;
  }

  input,
  textarea,
  select,
  .input,
  .textarea {
    background-color: $secondary-background-dark;
    color: $primary-text-dark;
    border-color: $contrast-background-dark;

    &::placeholder {
      color: #aaa;
    }
  }

  // Buttons
  .button.is-outlined.is-success:not(.is-focused, :hover, :focus) {
    background-color: $primary-background-dark;
    color: #48c78e;
    border-color: #48c78e;
  }

  .button.is-outlined.is-danger:not(.is-focused, :hover, :focus) {
    background-color: $primary-background-dark;
  }

  .button.is-outlined.is-warning:not(.is-focused, :hover, :focus) {
    background-color: $primary-background-dark;
  }

  .button:not(.is-success, .is-danger, .is-warning, .is-light) {
    background-color: $secondary-background-dark;
    color: $primary-text-dark;
    border-color: $contrast-background-dark;
  }

  .button.is-light {
    background-color: $secondary-background-dark;
    color: $primary-text-dark;
  }

  // Modal
  .modal-card-head,
  .modal-card-foot {
    background-color: $contrast-background-dark;
    border-color: $contrast-background-dark;
  }

  .modal-card-head .modal-card-title {
    color: $primary-text-dark;
  }

  .modal-card-body {
    background-color: $primary-background-dark;
    color: $primary-text-dark;
  }

  // Navbar
  .navbar {
    background-color: $contrast-background-dark;
  }

  .navbar-item,
  .navbar-burger {
    color: $primary-text-dark;
  }

  // Select dropdown arrow
  .select:not(.is-multiple):not(.is-loading)::after {
    border-color: $primary-text-dark;
  }

  .select select {
    background-color: $secondary-background-dark;
    color: $primary-text-dark;
    border-color: $contrast-background-dark;
  }

  // Interval selector inputs
  .interval-group input {
    background-color: $secondary-background-dark !important;
    color: $primary-text-dark;
  }

  // Notification
  .notification {
    background-color: $secondary-background-dark;
    color: $primary-text-dark;
  }

  // Links
  a:not(.menu a):not(.button) {
    color: #7eaef1;
  }

  // Content area
  .content {
    color: $primary-text-dark;
  }

  // Checkbox
  .checkbox {
    color: $primary-text-dark;
  }

  // Message input
  .message-input {
    background-color: $secondary-background-dark;
    color: $primary-text-dark;
  }

  // Box
  .box {
    background-color: $secondary-background-dark;
    color: $primary-text-dark;
  }

  // Panel
  .panel {
    background-color: $secondary-background-dark;

    .panel-heading {
      background-color: $contrast-background-dark;
      color: $primary-text-dark;
    }

    .panel-block {
      color: $primary-text-dark;
      border-color: $contrast-background-dark;
    }
  }

  // Horizontal rule
  hr {
    background-color: $contrast-background-dark;
  }

  // Tag
  .tag:not(.is-success, .is-danger, .is-warning, .is-info) {
    background-color: $contrast-background-dark;
    color: $primary-text-dark;
  }

  // Todo
  .todo {
    color: $primary-text-dark;
  }

  // Page links
  .page-links .button {
    background-color: $secondary-background-dark;
    color: $primary-text-dark;
    border-color: $contrast-background-dark;
  }

  // Loading overlay
  .load-screen {
    background-color: rgba(36, 36, 36, 0.8);
    color: $primary-text-dark;
  }

  // File/attachment input
  .file-cta {
    background-color: $secondary-background-dark;
    color: $primary-text-dark;
    border-color: $contrast-background-dark;
  }

  .file-name {
    background-color: $secondary-background-dark;
    color: $primary-text-dark;
    border-color: $contrast-background-dark;
  }

  // Date/time inputs color scheme
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"] {
    color-scheme: dark;
  }

  // Modal background overlay
  .modal-background {
    background-color: rgba(10, 10, 10, 0.86);
  }
}
