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

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

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

  .rubber-stamp-panel-header {
    font-size: 16px;
    font-weight: 700;
  }

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

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

  .rubber-stamps-container {
    overflow: auto;
    padding: 0px 4px;

    .collapsible-page-group-header {
      button {
        font-size: 14px;
        font-weight: 700;
        margin: 16px 0px;
      }
    }

    .rubber-stamps-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding-top: 2px;
      padding-bottom: 16px;

      .rubber-stamp {
        @include button-reset;
        height: 48px;
        padding: 0px 8px;
        border: solid 1px var(--border);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background-color: var(--panel-list-item);
        flex-grow: 1;

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

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

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

  .custom-rubber-stamp-row {
    display: flex;
    align-items: center;
    gap: 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: solid 1px var(--blue-6);
        background: var(--gray-2);
      }
    }
  }

  @include mobile {
    width: 100%;

    .rubber-stamp-panel-header {
      margin: 0 16px 16px 16px;
    }

    [data-element='createRubberStampButtonWrap'] {
      padding: 0 16px;

      .CreateRubberStampButton {
        margin-top: 0;
      }
    }

    &.small-size:not(.isFlyout) {
      .CreateRubberStampButton,
      .Divider,
      .collapsible-page-group-header,
      .rubber-stamps-list-header {
        display: none;
      }
    }

    .rubber-stamps-container {
      position: relative;
      padding: 0 14px;
      padding-bottom: 16px;
      overflow-y: scroll;

      &.small-size {
        overflow: hidden;
      }

      &.isFlyout {
        overflow-y: scroll;

      }

      .rubber-stamps-list {

        .rubber-stamp,
        .icon-button {
          &:hover {
            background-color: var(--gray-0);
          }

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

      .Divider {
        margin: 0;
      }
    }
  }

  &.modular-ui-panel {
    .rubber-stamps-list .rubber-stamp {
      border-color: var(--lighter-border);

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