@import 'buefy';
@import 'base';

.page-title {
  @include font-title();
  color: $color__neutral-900;
  text-align: center;

  @media (min-width: $bp__layout) {
    font-size: 3.7vw;
    text-align: left;
  }

  @media (min-width: 90em) {
    font-size: 3.5rem;
  }
}

.page-heading {
  margin: 1rem;

  @media (min-width: $bp__layout) {
    width: 14em;
    max-width: calc(50% - #{$site-menu__header-width} - 3rem);
    margin: 2rem 1rem 1rem 2rem;
  }
}

.thumb-overlay {
  $color: $color__neutral-100; // color of overlay

  box-shadow: 0 0 12px 0 $color__neutral-100 inset,
              0 2px 12px 3px rgba($color__neutral-100, .5);

  transition: filter 1s;
  filter: grayscale(.5);

  @media (min-width: $bp__layout) {
    box-shadow: 0 0 12px 0 $color__neutral-400 inset,
                0 2px 12px 3px rgba($color__neutral-300, .5);

    filter: grayscale(.95);
    &:hover {
      filter: grayscale(.5);
    }
  }

  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  &::before {
    background: linear-gradient(
                  to bottom,
                  rgba($color, .5),
                  rgba($color, 0),
                  rgba($color, .7)
                );
  }

  &::after {
    background: linear-gradient(
                  to left,
                  rgba($color, .2),
                  rgba($color, 0),
                  rgba($color, .2)
                );
  }
}

.btn-link {
  padding: .4em .8em;
  color: $color__neutral-900;
  border: 2px solid $color__neutral-900;
  @include font-title();

  &::before {
    content: '';
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: $color__neutral-200;
    background: linear-gradient(
                  to bottom left,
                  $color__neutral-400,
                  $color__neutral-200
                );

    transition: opacity .3s;
    opacity: .4;
  }

  &:link, &:visited {
    color: $color__neutral-900;
  }

  &:hover, &:active {

    &::before {
      opacity: .8;
    }
  }

  &:focus {

  }
}

.background-tint {
  background-color: rgba($color__primary-100, .7);
}

.selected-indicator {
  @media (min-width: $bp__layout) {
    &::before {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;

      transition: opacity 1s;
      opacity: 0;

      border: 1px solid $color__neutral-700;;
    }
  }

  &.is-active::before {
    transition: opacity 2s .2s;
    opacity: 1;
  }
}

.page-enter-active, .page-leave-active {
  transition: opacity .5s;
}

.page-enter, .page-leave-active {
  opacity: 0;
}