// // scss for tag page //

.states-nav {

@include fs-6;
display: flex;
position: absolute;
width: 100%;
z-index: 2;
top: 0;
user-select: none;

.states-nav-list {
  overflow-x: scroll;
  white-space: nowrap;
  padding-left: 0 !important;
}

.states-list-item {
  display: inline-block;
  margin-right: $sp-3;
  margin-left: $sp-3;
  margin-top: 0;
  padding-top: $sp-2;
  padding-bottom: $sp-5;
  transition: all .2s ease-in-out;

  &::before {
    content: "";
  }

  &.active {
    filter: drop-shadow(0 2mm 2mm $drop-shadow-green);
  }

  &:hover {
    transform: scale(1.5); 
    filter: drop-shadow(0 2mm 2mm $drop-shadow-brown);
  }
}

@include mq(md) {
  padding-right: $gutter-spacing-sm;
}

}

.states-page {

padding-top: $sp-10;

}

.states-list {

padding: $sp-4;
display: block; // columns require block
column-count: 2;
column-width: $content-width / 6;

.states-list-item {
  // display: flex; 
  list-style-type: none !important;

  &::before {
    content: "" !important;
  }
}

}

.no-results {

padding: $sp-5;
text-align: center;
color: grey;

}