@import '~styles/mixins';

.generic-drop-down {
  color: black;
  text-align: left;
  width: 100%;

  .head {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;

    position: relative;

    svg {
      margin-left: 20px;
      font-size: 12px;
      transform: rotate(-90deg);

      &.arrow {
        transition: 0.3s ease-in-out all;

        &.active {
          transform: rotate(0deg);
        }
      }
    }

    span {
      background: white;
    }
    .left,
    .right {
      align-items: center;
      display: flex;
    }
    .right {
      justify-content: flex-end;
      font-weight: bold;
      color: black;
      @include transition();
      opacity: 0;
      &.active {
        opacity: 1;
      }
      @include tablet {
        display: none;
      }
    }

    &:hover {
      color: var(--pro-color);
      cursor: pointer;
    }
  }

  .content {
    // transition: max-height 0.35s ease-in-out;
    overflow-y: hidden;
    overflow-x: hidden;

    &::-webkit-scrollbar {
      width: 4px;
      border-radius: 4px;
    }

    /* Handle */
    &::-webkit-scrollbar-thumb {
      background: #c4c4c4;
    }

    &.not-active {
      max-height: 0px;
    }

    &.active {
      max-height: none;
      overflow-y: unset;
      overflow-x: unset;
    }

    &.home {
      margin-left: 30px;

      > * {
        font-size: 24px;
        font-weight: 200;
        line-height: 1.67;
      }
    }
  }
}
