.root {
  position: relative;
  z-index: 10;
  .v-theme--dark & {
    @include bg-color-darken($palette-primary-light, 0.8)
  }
  .v-theme--light & {
     @include bg-color-lighten($palette-primary-light, 0.8)
  }
  .nav {
    @include breakpoints-down(sm) {
      max-width: 100%;
      display: flex;
      overflow: auto;
    }
  }
}

.side-filter {
  .nav {
    background: none
  }
  .filter {
    border-radius: $rounded-small;
    text-transform: capitalize;
    margin-bottom: $spacing1;
    padding: spacing(1.5, 2);
    width: 90%;
    min-height: 40px;
    font-size: 18px;
    @include breakpoints-down(sm) {
      width: auto;
      flex: 1;
      text-align: center
    }
  }
  .active {
    background: $palette-primary-light;
    color: $palette-primary-dark;
  }
}

.massonry {
  button {
    width: 100%
  }
}
