cyb/src/components/Dropdown/Dropdown.module.scss

.dropdown {
  display: inline-block;
  padding: 0 15px;

  > button {
    // REFACTOR: use Triangle component
    color: var(--blue-light);

    display: flex;
    align-items: center;

    &::after {
      content: '▼';
      font-size: 8px;
      position: relative;
      top: 3px;
      margin-left: 10px;
    }
  }
  position: relative;

  ul {
    margin-top: 15px;
    &::before {
      background-color: rgba(0, 17, 22, 0.37);
      filter: blur(10px);
      content: '';
      height: 100%;
      left: 0;
      z-index: -1;
      position: absolute;
      top: 0;
      width: 100%;
    }
    position: absolute;
    padding: 15px;

    z-index: 1;
    left: 0;
    right: 0;
    list-style-type: none;

    li + li {
      margin-top: 12px;
    }

    li {
      &.active {
        button {
          color: var(--blue-light);
        }
      }
      transition: all 300ms ease-out;

      button {
        color: rgba(255, 255, 255, 0.5);

        &:hover {
          color: var(--blue-light);
        }
      }
    }
  }

  button {
    font-size: 1rem;
  }
}