.shopping-list {
  &-note {
    .actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      &.actions--v2 {
        & .btn {
          flex: 1 1 calc(50% - 10px);
          margin-right: 10px;

          &:last-child {
            margin-right: 0;
            margin-left: 10px;
          }
        }

        .dropdown-share-list,
        .download-pdf {
          width: 100%;
          max-width: calc(50% - 10px);
        }

        .dropdown-share-list {
          margin-right: 10px;
          position: relative;

          .dropdown-menu {
            z-index: $zindex-share;
            position: absolute;
            top: 16px;
            left: 0;
            transform: translate(0, 50%);
            border: 0;
            padding: 10px;
            border-radius: 0;
            box-shadow: 2px 2px 2px 0 $black-transparent24;

            .a2a_button_email {
              svg {
                background: $blue;
              }
            }

            .a2a_default_style:not(.a2a_flex_style) a {
              padding: 0;
            }
          }

          & .socials__list {
            margin-bottom: 0;
          }

          .socials__item + .socials__item {
            margin-left: 20px;
          }
        }
      }

      &:not(.actions--v2) {
        & .btn {
          max-width: calc(50% - 10px);

          &:not(.download-pdf) {
            @include flex-centralize;
          }

          &:first-of-type {
            margin-right: 10px;
          }
        }
      }
    }

    .actions,
    .project-list-note {
      @include make-col(12);

      & .btn {
        @include flex-centralize;

        .icon {
          margin-right: 15px;
          font-size: 1rem;
        }
      }
    }

    .project-list-note {
      padding: 0;
    }
  }
}

.note {
  margin-bottom: 15px;

  &__field {
    .tbx {
      min-height: 85px;
    }

    .form-row {
      margin-bottom: 6px;

      &__label {
        display: none;
      }

      &__error {
        margin-top: 0;
        margin-bottom: 6px;
        padding-left: 0;
      }

      &__field {
        padding-left: 0;
        padding-right: 0;

        .tbx_textarea {
          overflow: hidden;
        }
      }

      &__info {
        margin-top: 0;
        padding-right: 0;
        text-align: right;
        font-size: .875rem;
      }
    }
  }

  &__save {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }

  &__change {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .btn-edit-note {
      width: calc(100%/2 - 10px);
    }

    .btn-remove-note {
      align-items: center;
      width: 32px;
      height: 32px;
      font-size: 1rem;
      padding: 0;
      border-radius: 50%;
      background: $white;
      color: $blue;
    }
  }

  &-add {
    .note {
      &__field,
      &__actions {
        display: none;
      }

      &__add {
        display: block;
      }
    }
  }

  &-edit {
    .note {
      &__add,
      &__change {
        display: none;
      }

      &__field,
      &__actions {
        display: block;
      }

      &__save {
        display: flex;
      }
    }
  }

  &-saved {
    .note {
      &__add {
        display: none;
      }

      &__field,
      &__actions {
        display: block;
      }

      &__actions {
        &__changes {
          display: block;
        }
      }

      &__field {
        .form-row__info {
          display: none;
        }

        .tbx {
          &:read-only {
            background: $blue-transparent10;
            border-color: transparent;
          }
        }
      }
    }
  }
}

@include media-breakpoint-up(sm) {
  .note {
    &__save {
      flex-direction: row;
      gap: 20px;
    }

    &__field {
      .form-row {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
      }
    }
  }

  .shopping-list-note .actions.actions--v2 .dropdown-share-list .dropdown-menu {
    left: 50%;
    transform: translate(-50%, 50%);
  }
}