src/components/RubberStampOverlay/RubberStampOverlay.scss
@import '../../constants/styles';
@import '../../constants/overlay';

.rubber-stamp-overlay {
  margin-inline-start: 0px;
  margin-bottom: 8px;
  padding-inline-start: 8px;
  padding-inline-end: 4px;

  @include mobile {
    margin-bottom: 0px;
    margin-inline-end: 0px;
    padding-top: 12px;
  }

  .custom-stamp-panel {
    max-height: 270px;
    overflow: auto;
    margin-bottom: 8px;
  }

  .standard-stamp-panel {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    flex-flow: row wrap;
    align-content: flex-start;
    max-height: 300px;
    overflow-y: scroll;
  }

  .standard-stamp-panel {
    @include mobile {
      height: 236px;
      width: 300px;
    }
  }

  .rubber-stamp {
    @include button-reset;
    border-radius: 4px;
    flex-basis: 50%;
    cursor: pointer;

    &:hover {
      background: var(--popup-button-hover);
    }

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

    img {
      width: 100%;
    }
  }

  .stamp-row {
    display: flex;
    flex-direction: row;
    height: 45px;
    justify-content: space-between;
    padding-bottom: 4px;

    @include mobile {
      justify-content: center;
    }

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

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

    .custom-stamp {
      @include button-reset;
      flex-shrink: initial;
    }
  }

  .stamp-row-content {
    width: 162px;
    border-radius: 4px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-inline-end: 8px;

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

      @include ie11 {
        // using this notation for IE11 purposes
        flex-grow: 1;
        flex-basis: 0;
      }
    }

    &:not(.add-btn) {
      &:hover {
        background: var(--popup-button-hover);
      }
    }

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

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

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

  .stamp-row-content.add-btn {
    background-color: transparent;

    @include mobile {
      width: 90%;
      margin-inline-end: 0px;
    }
  }

  .tab-header {
    @include mobile {
      width: 300px;
      margin: auto;
    }
  }

  .tab-list {
    display: flex;
    margin-bottom: 16px;
    border-radius: 4px;
    border: 1px solid var(--border);
    height: 28px;
    color: var(--text-color);
    margin-bottom: 8px;
    width: 100%;

    .tab-options-button {
      @include button-reset;
      text-align: center;
      vertical-align: middle;
      line-height: 24px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      flex: 1;
      border-radius: 0px;
      cursor: pointer;
      padding: 0 10px;

      &:first-child {
        border-bottom-left-radius: 4px;
        border-top-left-radius: 4px;
      }

      &:last-child {
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
      }

      &:hover {
        background: var(--popup-button-hover);
      }

      &.selected {
        background: var(--popup-button-active);
        cursor: default;
      }
    }

    .tab-options-divider {
      width: 1px;
      background: var(--divider);
    }
  }
}