$border-radius: 0;
$border-radius-lg: $border-radius;
$border-radius-sm: $border-radius;

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

$primary: #005ea8;

$custom-control-indicator-checked-bg: $dark;
$custom-control-indicator-active-bg: $dark;


$line-types: (
  'trolleybus': #419517,
  'tram':       #cd2e12,
  'bus':        $primary,
  'train':      $yellow,
  'unknown':    $dark
);

$default-spacing: .5rem;

$alert-margin-bottom:    $default-spacing;
$headings-margin-bottom: $default-spacing;

$container-max-widths: map-merge($container-max-widths, ( xl: 1320px ));

$link-color: #005ea8;

@import "~bootstrap/scss/bootstrap";

@mixin headings {
  h1, h2, h3, h4, h5, h6 {
    @content
  }
}

@mixin direct-headings {
  > h1, > h2, > h3, > h4, > h5, > h6 {
    @content
  }
}

@import "common";
@import "stop";
@import "departure";
@import "line";
@import "controls";
@import "popper";
@import "animations";

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  main {
    flex: 1 1 auto;
    position: relative;

    > * {
      transition: opacity .3s ease-in-out;
    }
  }

  main::after {
    transition: opacity .3s ease-in-out;
    position: absolute;
    top: 2rem;
    bottom: 2rem;
    right: 2rem;
    left: 2rem;
    content: "";
    opacity: 0;
    background: url("../images/logo.png") center center no-repeat;
    background-size: contain;
    display: none;
  }

  main.not-ready {
    > * {
      opacity: 0;
    }

    &::after {
      opacity: 1 !important;
      display: block;
    }
  }

  .attribution {
    font-size: small;
    color: $text-muted;
    text-align: right;
  }

  footer {
    @extend .flex;
    flex-wrap: wrap;

    font-size: $font-size-sm;
    padding: $alert-padding-y $alert-padding-y;
    transition: all .5s ease;
    opacity: .15;
    filter: grayscale(100%);

    &:hover {
      opacity: 1;
      filter: grayscale(0%);
    }

    img {
      height: 1.5rem;
    }

    > * {
      flex: 1 1 auto;
      padding: .4rem 0;
    }
  }
}

#app {
  margin-top: $grid-gutter-width / 2;
}

@include media-breakpoint-up('md') {
  #app {
    padding-top: 4rem;
  }

  body footer > * {
    flex: 0 1 auto;
  }
}