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

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

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

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

  @media (min-width: $bp__layout) {
    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)
                );
  }
}