src/components/SignatureListPanel/SignatureListPanel.scss
@import '../../constants/styles';

.SignatureAddButton {
  width: auto;
  padding: 8px;
  color: var(--blue-5);
  border: solid 1px var(--blue-5);
  border-radius: 4px;
  margin: 16px 0;

  &:not(.disabled):hover {
    color: var(--primary-button-hover);
    border-color: var(--primary-button-hover);
  }

  &.disabled {
    color: var(--blue-5);
    opacity: 0.5;
    cursor: not-allowed;

    span {
      color: var(--blue-5);
    }
  }

  @include mobile {
    margin: 16px;

    &:not(.disabled):hover {
      color: var(--blue-5);
      border: solid 1px var(--blue-5);
    }
  }
}

.SignatureListPanel {
  height: 100%;
  display: flex;
  flex-direction: column;

  &.isFlyout {
    padding: 8px;
    width: 264px;
    max-height: 296px;
    overflow-y: scroll;
  }

  .signature-list-panel-header {
    margin-top: 0px;
    font-size: 16px;
    font-weight: 700;
  }

  .signature-header {
    margin: 16px 0px;
    font-size: 14px;
    font-weight: 700;
  }

  .signature-list {
    padding: 16px 2px 0 2px;

    overflow: auto;
  }

  .signature-row {
    display: flex;
    flex-direction: row;
    height: 48px;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;

    .icon-button {
      @include button-reset;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        border: 1px solid var(--blue-6);
        background: var(--gray-2);
      }
    }
  }

  .signature-list-header {
    display: flex;
    flex-direction: row;
    align-items: center;

    .signature-title {
      flex-grow: 2;
      margin-inline-end: 8px;
      min-width: 160px;
      font-weight: var(--font-weight-bold);
    }

    .initials-title {
      flex-grow: 1;
      max-width: 65px;
      font-weight: var(--font-weight-bold);
    }

    .delete-spacer {
      width: 40px;
    }
  }

  .signature-row-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-grow: 1;

    .signature-row-content {
      @include button-reset;
      height: 40px;
      padding: 4px 8px;
      border: solid 1px var(--lighter-border);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-inline-end: 8px;
      background-color: var(--panel-list-item);
      flex-grow: 2;

      img {
        max-width: 100%;
        max-height: 100%;
      }

      &.interactable {
        &:hover {
          border-color: var(--blue-6);
        }

        &.active {
          background: var(--gray-2);
          border-color: var(--blue-5);
        }
      }

      &.active {
        background: var(--tools-overlay-button-active);
      }

      &:focus-visible {
        outline: var(--focus-visible-outline) !important;
      }

      .signature-button-icon {
        width: 20px;
        height: 20px;
        margin-top: 2px;
      }
    }

    .initials {
      max-width: 65px;
    }
  }

  @include mobile {
    width: 100%;
    position: relative;

    &.small-size {
      .Divider {
        display: none;
      }
    }

    &.hideAddButton {
      .SignatureAddButton {
        display: none;
      }
    }

    .signature-title,
    .initials-title {
      display: none;
    }

    .signature-list-panel-header,
    .signature-row {
      padding: 0 16px;
    }

    .signature-list {
      padding-bottom: 16px;
      position: relative;

      .signature-row {
        justify-content: center;
        margin-top: 0;
        margin-bottom: 8px;
      }
    }
  }
}