.add {
  position: relative;
  display: inline-block;
  height: 24px;
  margin-top: 16px;
  margin-bottom: 40px;


  .toggle {
    position: relative;
    padding-left: 32px;
    color: var(--blue-1);
    // background: var(--white) url("~src/assets/images/icons/add_24dp.svg") no-repeat center;
    cursor: pointer;
    z-index: 1;
    &:before {
      display: inline-block;
      width: 24px;
      height: 24px;
      background: var(--white) url("~src/assets/images/icons/add_cirle_24dp.svg") no-repeat center;
      content: '';
      z-index: 0;
      bottom: -2px;
      position: absolute;
      left: 0px;
    }
    &:hover{
      &:before{
        background-image: url("~src/assets/images/icons/add_cirle_active_24dp.svg");
      }
      &:after{
        background-image: url("~src/assets/images/icons//arrow_drop_down_active_24dp.svg");
      };
      color: var(--blue-3);
    }
    &.active{
      &:before{
        background-image: url("~src/assets/images/icons/add_cirle_active_24dp.svg");
      }
      &:after{
        transform: rotate(180deg);
        background-image: url("~src/assets/images/icons//arrow_drop_down_active_24dp.svg");
      };
      color: var(--blue-3);
    }
    &:after {
      display: inline-block;
      width: 24px;
      height: 24px;
      background: var(--white) url("~src/assets/images/icons/arrow_drop_down_24dp.svg") no-repeat center;
      content: '';
      z-index: 0;
      bottom: -2px;
      position: absolute;
      right: -28px;
      transform: rotate(0deg);
      transition: transform .3s;
      
    }
  }

  .dropdown {
    display: none;
    width: 250px;
    left: 48px;
    top: 24px;
    z-index: 10;
    &.active {
      display: block;
    }

    .menu {
      display: flex;
      flex-direction: column;
      margin: 0;
      padding: 0;
      border-radius: 12px;
      position: relative;
      z-index: 30;
      .type {
        display: flex;
        flex-direction: column;
        &:first-child {
          border-radius: 12px 12px 0 0;
        }
        &:last-child {
          border-radius: 0 0 12px 12px;
          .row {
            border-bottom: none;
          }
          a, span {
            border-bottom: none;
          }
        }
        >&:hover {
          background-color: #f7f7f7;
        }
        .row {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          padding: 12px 20px;
          border-bottom: #E0E0E0 solid 1px;
          column-gap: 12px;
          cursor: pointer;
          color: #2D2D2D;
          background: transparent;
          
          
          

        }

        .sub-row {
          padding: 12px 16px 12px 32px;
          border-bottom: #E0E0E0 solid 1px;
          color: #6C6C6C;
          cursor: pointer;
          &:hover {
            background-color: #f7f7f7;
          }
        }
      }
    }
  }

}
