// Dropdown Base
.c-dropdown {
  overflow: visible;
  position: relative;
  display: inline-block;

  &-right {
    float: right;
  }

  &-divider {
    border-top: $dropdown-border;
    margin: $space-xs (-$space-xs);
  }

  &-list {
    @include dropdown-list;

    .c-dropdown-heading {
      display: block;
      text-decoration: none;
      color: $dropdown-color;
      text-transform: uppercase;
      font-weight: $font-weight-bold;
      font-size: $dropdown-font-size;
      padding: $dropdown-item-padding;
    }

    .c-dropdown-icon {
      color: $dropdown-icon-color;
      font-size: $dropdown-icon-font-size;
      padding-right: $dropdown-icon-padding;
    }

    li a,
    .c-dropdown-item {
      @include dropdown-item;

      @include not($link-colors) {
        color: $dropdown-color;

        &:hover {
          color: $dropdown-color-hover;
        }
      }
    }
  }
}


.c-dropdown-grid {
  @include dropdown-grid;

  width: $dropdown-min-width + 100px;

  .c-dropdown-item {
    @include dropdown-grid-item;
  }

  &-col-2 {
    width: $dropdown-min-width;

    .c-dropdown-item {
      flex-basis: 50%;
    }
  }

  &-col-4 {
    width: $dropdown-min-width + 200px;

    li a,
    .c-dropdown-item {
      flex-basis: 25%;
    }
  }

  &-right {
    right: 0;
    left: auto;
    position: absolute;
    min-width: $dropdown-min-width;
  }
}