.igloo-header-drop-down-menu {
  background: #ffffff;
  color: @icon-color;
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.16);
  border-radius: 3px;
  top: 8px;
  position: relative;

  .menu-top {
    border-bottom: 1px solid #eeeeee;
    padding: 16px 24px;
  }

  .menu-actions {
    padding: 12px 0px;

    .action-item {
      padding: 12px 24px;
      cursor: pointer;

      &:hover {
        background-color: #f9f9f9;
      }
    }
  }
}

.igloo-home-drop-down-container {
  position: relative;
  width: 24px;
  height: 24px;
  cursor: pointer;

  .arrow-active {
    color: @active-color;
    font-size: 24px;
    position: absolute;
    transition: all 0.3s;
    opacity: 1;
  }

  .arrow-default {
    position: absolute;
    color: @icon-color;
    font-size: 24px;
    transition: all 0.3s;
    opacity: 1;
  }
}

.igloo-home-drop-down-mobile-container {
  position: relative;
  width: 24px;
  height: 24px;
  cursor: pointer;

  .arrow-active {
    color: @active-color;
    font-size: 24px;
    position: absolute;
    transition: all 0.3s;
    opacity: 1;
  }

  .arrow-default {
    color: @active-color;
    position: absolute;
    font-size: 24px;
    transition: all 0.3s;
    opacity: 1;
  }
}

.igloo-home-drop-down-mobile-overlay-container {
  background: #ffffff;
  color: @icon-color;
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.16);
  border-radius: 3px;
  top: 8px;
  position: relative;

  .menu-top {
    border-bottom: 1px solid #eeeeee;
    padding: 16px 24px;
    display: flex;
    align-items: flex-start;

    .top-info {
      margin-left: 8px;
    }
  }

  .menu-actions {
    padding: 12px 0px;

    .action-item {
      padding: 12px 24px;
      cursor: pointer;

      &:hover {
        background-color: #f9f9f9;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .ant-dropdown {
    width: 100%;
  }
}