.c-dropup {
  background-color: use-color('base', true-white);
  border-radius: 4px;
  box-shadow: $box-shadow-card-lvl-1;
  display: none;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  right: -8px;
  top: -50%;
  z-index: use-layer('content-2');
  
  @include element('trigger') {
    position: absolute;
    right: 8px;
    top: 8px;
    transform: rotate(90deg);

    [class^='icon-'],
    [class*=' icon-'] {
      color: use-color('grey', light);
      cursor: pointer;
      font-size: 16px;
    }

    &:hover {
      ~ .c-dropup {
        display: block;
      }
    }
  }

  @include element('item') {
    @include use-font('caption');
    line-height: 20px;
    margin-bottom: 4px;
    padding: 0 12px;

    a {
      color: use-color('base', 'black');
      display: flex;
      text-align: left;
      text-decoration: none;
      width: 100%;
      
      &::first-letter {
        text-transform: uppercase;
      }
    }

    [class^='icon-'],
    [class*=' icon-'] {
      color: use-color('primary');
      font-size: 20px;
      margin-right: 12px;
      width: 20px;
    }
    
    &:last-child() {
      margin-bottom: 0;
    }

    &:hover {
      background-color: use-color('grey', light-iii);
    }
  }

  @include modifier('top-right') {
    right: 4px;
    top: 4px;
  }
  
  @include modifier('top-left') {
    right: 40px;
    top: 4px;
  }
  
  @include modifier('bottom-left') {
    right: 14px;
    top: 58px;
  }

  @include modifier('active') {
    display: block;
  }

  &:hover {
    display: block;
  }
}