@import "../Tokens/tokens.scss";
@import "../../common/scss/helpers";

.icon-dropdown-nav {
  position: relative;
  display: inline-block;

  .icon-dropdown-nav-trigger {
    @include reset-button();
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 ($baseUnit);
  }

  .icon-dropdown-nav-dropdown {
    position: absolute;
    background: #fff;
    border: 1px solid #C6C6C6;
    z-index: 100;
    box-shadow: 0 20px 12px 0 rgba(0, 0, 0, 0.025);

    ul {
      @include reset-list();
    }

    &.left-bottom {
      top: 0;
      right: 0;
    }

    &.left-top {
      bottom: 0;
      right: 0;
    }
    
    &.right-bottom {
      top: 0;
      left: 0;
    }
    
    &.right-top {
      bottom: 0;
      left: 0;
    }
  }
}

.icon-dropdown-nav-item {
  white-space: nowrap;

  .nav-item-icon {
    margin: auto 0;
    width: $baseUnit * 4;
    max-width: $baseUnit * 4;
  }

  .nav-item-title {
    
  }

  a,
  button {
    @include reset-button();
    display: flex;
    gap: $baseUnit;
    line-height: $baseUnit * 6;
    width: 100%;
    height: $baseUnit * 6;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
    padding: 0 ($baseUnit * 3);
    border-bottom: 1px solid rgba(#C6C6C6, 0.37);
    font-size: 16px;
    text-align: left;
    cursor: pointer;
    user-select: none;

    &:hover,
    &:focus {
      background: $hummingBird;
    }

    &:focus {
      outline: 1px dotted #ccc;
    }
  }

  &:last-child {
    a {
      border-bottom: 0;
    }
  }
}