@charset "utf-8";

@import "./../../../bulma/sass/utilities/initial-variables";
@import "./../../../bulma/sass/utilities/functions";

$primary: hsl(163, 100%, 49%);
$link: hsl(163, 100%, 49%);
$link-hover: findDarkColor($link);
$body-background-color: hsl(0, 0%, 9%);
$code-background: $grey-darker;
$code: $link;

$card-header-color: $link;
$panel-heading-background-color: $black-ter;
$panel-shadow: hsla(172, 91%, 60%, 0.02);
$text: hsl(0, 0%, 70%);
$text-strong: hsl(0, 0%, 90%);

// Dark Mode
$scheme-main: $black;
$scheme-invert: $white;
$border: rgba($link, 0.4);
$navbar-item-hover-background-color: rgba(0, 0, 0, 0);
$panel-block-color: lighten($link, 50);
$panel-icon-color: $link;
$card-footer-border-top: 1px solid transparentize($white, 0.7);


@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');
@import "./../../../bulma/bulma.sass";

html, body {
  height: 100%
}

// Can't figure out how to color panel bottom border with variables
.panel-block:not(:last-child), .panel-tabs:not(:last-child) {
  border-bottom-color: rgba($link, 0.4);
}

.navbar {
  font-family: 'Open Sans', sans-serif;

  // Make navbar brand title stand out
  .navbar-brand .navbar-item {
    font-size: 150%;
    font-weight: 600;
  }
}

#browse.card .card-content {
  padding: 0;
}

.card .media {
  // Cancel out Bulma css
  &:not(:last-child) {
    margin-bottom: 0;
  }

  margin: 0;
  padding: 1rem;
}

.panel-icon {
  margin-right: 1em;
}

// Decrease tag size a bit
.tag:not(body) {
  font-size: 0.7rem;
  line-height: 1.3;
  padding: 0 0.6em;
}

// Vertically center all icons
.icon {
  vertical-align: middle;
}

.media {
  width: 100%;

  b, span, a, p {
    padding: 0 3px;
  }

  .media-filename {
    text-decoration: underline;
    text-decoration-color: lighten($link, 15%);
  }

  .media-fileid {
    color: $link;
  }
}

.panel {
  background: darken($body-background-color, 2.5%);
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-content: stretch;
  align-items: flex-start;

  div {
    align-self: auto;
  }

  div:nth-child(1) {
    flex: 1 1 auto;
  }

  div:nth-child(2), div:nth-child(3) {
    flex: 0 1 auto;
  }
}