@import 'variables.module';
@import 'global.module';

.dropDown {
  position: relative;

  > label {
    display: flex;

    align-items: center;
    gap: 8px;

    cursor: pointer;

    padding: 8px 24px;
  }

  > .dropDownMenu {
    position: absolute;

    top: calc(100% + 4px);
    right: 0;

    background: $colorSurfaceLight4;

    border: 1px solid $colorBorderLight1;
    border-radius: .5rem;

    overflow: hidden;

    display: none;

    min-width: max(100%, 200px);

    > ul {
      list-style: none;

      display: flex;

      flex-direction: column;

      margin: 0;

      > li {
        > a {
          padding: 11px 24px;

          display: flex;

          flex-direction: row;

          align-items: center;
          gap: 24px;

          text-decoration: none;

          transition: 150ms;

          > .icon {
            width: 20px;
            height: 20px;
          }

          &:hover {
            background: rgba($colorPrimary, 0.65);

            color: $colorSurfaceLight1;
          }
        }

        > .divider {
          border-bottom: 1px solid $colorBorderLight1;

          width: 100%;

          @media (prefers-color-scheme: dark) {
            border-color: $colorBorderDark1;
          }
        }
      }
    }

    @media (prefers-color-scheme: dark) {
      border-color: $colorBorderDark1;
      background: $colorSurfaceDark4;
    }
  }

  > .mobileOverlay {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba($colorSurfaceLight1, 0.65);

    display: none;

    @media (prefers-color-scheme: dark) {
      background: rgba($colorSurfaceDark1, 0.65);
    }
  }

  &.open {
    > label {
      outline: 2px solid rgba($colorPrimary, 0.65);

      color: $colorPrimary;
    }

    > .dropDownMenu {
      display: block;

      z-index: 1000000;
    }

    @media (max-width: 768px) {
      > .mobileOverlay {
        display: block;

        z-index: 100000;
      }

      > .dropDownMenu {
        position: fixed;

        top: 50%;
        left: 50%;
        
        transform: translate(-50%, -50%);

        min-width: fit-content;
        min-height: fit-content;

        height: fit-content;
        width: 80vw;

        overflow-y: auto;

        border-radius: 1rem;

        padding: 8px 0;

        > ul {
          align-items: initial;
        }
      }
    }
  }
}