dotfiles

  1@import "variables";
  2
  3.search {
  4  &-container {
  5    display: inline-block;
  6    align-self: flex-end;
  7    position: relative;
  8    top: -32px;
  9    transition: all 0.5s ease-out;
 10    width: 160px;
 11    margin-bottom: -20px;
 12
 13    input {
 14      width: 100%;
 15      transition: background-color 0.2s ease-in;
 16
 17      &:hover {
 18        background-color: var(--accent-alpha-20);
 19      }
 20    }
 21
 22    @media (max-width: $tablet-max-width) {
 23      align-self: flex-end;
 24      width: 300px;
 25    }
 26
 27    @media (max-width: $phone-max-width) {
 28      left: 0 !important;
 29      margin-bottom: 20px;
 30      top: 20px;
 31      width: 100%;
 32    }
 33  }
 34
 35  &-results {
 36    background-color: var(--accent-alpha-20);
 37    backdrop-filter: blur(10px);
 38    border-style: inset;
 39    color: var(--accent-secondary);
 40    display: none;
 41    z-index: 1;
 42    max-height: 500px;
 43    overflow: auto;
 44    padding: 1rem;
 45    position: absolute;
 46    right: 0;
 47    width: 300%;
 48
 49    @media (max-width: $tablet-max-width) {
 50      left: 0;
 51      width: 300px;
 52    }
 53
 54    @media (max-width: $phone-max-width) {
 55      width: 100%;
 56    }
 57
 58    &__number {
 59      font-size: small;
 60      text-align: end;
 61      margin: 0 0 1rem;
 62    }
 63
 64    &__item {
 65      margin-bottom: 1rem;
 66
 67      .title {
 68        margin-top: -3px;
 69        margin-bottom: -3px;
 70      }
 71
 72      a {
 73        display: inline-block;
 74        font-size: $font-size;
 75        margin-bottom: 0.5rem;
 76      }
 77
 78      b {
 79        color: var(--accent);
 80      }
 81    }
 82
 83    &__items {
 84      list-style: none;
 85      margin: 0;
 86      padding: 0;
 87    }
 88
 89    li {
 90      border-bottom: 1px solid var(--color);
 91      font-size: 0.9rem;
 92      margin-top: 1rem;
 93
 94      &:first-of-type {
 95        margin-top: 0;
 96      }
 97
 98      &:last-of-type {
 99        border: none;
100      }
101    }
102  }
103}