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

.ZoomContainerWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--toggle-zoom-overlay-background);
  border-radius: 4px;
  height: 28px;
  min-width: 28px;
  margin: 2px;

  .ZoomContainer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 68px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      background-color: var(--view-header-button-hover);
    }

    &.active {
      background-color: var(--view-header-button-active);
    }

    .ToggleElementButton {
      width: 32px;
      height: 32px;
      font-size: 13px;

      button {
        @include mobile {
          font-size: var(--font-size-default);
        }
      }

      .Icon {
        color: var(--icon-color);
        width: 12px;
        height: 12px;
      }
    }

    .ZoomText {
      border-radius: 4px;
      align-items: center;

      input {
        resize: none;
        border: none;
        background-color: transparent;
        font-weight: 700;
        width: 40px;
        text-align: end;
      }

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

      &:dir(rtl) {
        flex-direction: row-reverse;
        padding-inline-start: 10px;

        input {
          text-align: start;
        }
      }
    }
  }

  // Avoids the child button chevron from overlapping the zoom text
  .Button.active,
  .Button:hover,
  .Button.zoomButton {
    background: none !important;
  }

  &.size1 {
    background: none !important;

    .Button:hover,
    .Button.active {
      background-color: var(--view-header-button-active) !important;
    }
  }
}
