@include export-module('co-list-of-icons') {
  .co-list-of-icons {
    position: relative;
    display: block;
    height: fit-content;
    margin-right: -10px;
    font-family: $cc-co-input-text-font-family;
    font-size: $cc-co-input-text-font-size;
    background: $cc-co-list-of-values-background-color;
    z-index: 1;

    .icon-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;

      .label {
        margin-top: 2px;
        text-align: center;
      }

      .drop-arrow {
        margin: 0 0 -12px -3px;
        width: 16px;
        height: 16px;
      }

      &.active {
        flex-direction: row;
      }

      &:hover,
      &.menu-opened {
        .co-icon svg,
        .co-icon svg * {
          fill: $color-action;
        }

        .label {
          color: $color-action;
        }
      }
    }

    .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      width: 65px;
      padding-top: 10px;
      box-shadow: -3px 0px 16px 1px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      background: #FFF;

      .icon-item {
        position: relative;
        margin-bottom: 12px;

        &.active {
          flex-direction: column;

          .co-icon svg,
          .co-icon svg * {
            fill: $color-action;
          }

          .label {
            color: $color-action;
          }
        }
      }
    }

    .picking-type-wrapper {
      position: absolute;
      top: -10px;
      left: 106%;
      z-index: 1;
      padding: 8px 6px 0;
      border-radius: 3px;
      background: #f8f8fa;
      box-shadow: 1px 1px 3px 1px #9d9d9d6e;

      .button-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
        text-align: center;
        cursor: pointer;

        &:hover {
          co-icon svg *,
          span {
            fill: $color-action;
            color: $color-action;
          }
        }

        .button-title {
          margin-top: 2px;
          font-size: 9px;
        }
      }
    }
  }
}

