src/constants/officeEditor.scss
@import './modal';

// office editor flyout dropdown
@mixin oe-modular-flyout-dropdown {
  min-width: 200px; // expands the flyout container to display dropdown item content
  width: 100%;
  padding: 4px 8px;

  &>.Dropdown {
    width: 100% !important;

    .Dropdown__input {
      width: 150px !important;
    }
  }

  .Dropdown__items {
    z-index: 90;
    inset-block-start: 38px !important; // align the dropdown to the bottom of the parent container with padding
    inset-inline-end: 8px; // align the dropdown to the right of the parent container
    max-width: calc(100% - 16px);
    overflow-y: auto;

    .Dropdown__item {
      flex-shrink: 0;
    }
  }

  .Dropdown__input {
    width: 100px !important;
    display: inline;
    box-sizing: border-box;
  }
}

@mixin oe-modular-custom-dropdown {
  .Dropdown__item {
    line-height: normal;
  }

  .Dropdown__item-icon {
    flex-shrink: 0;
    width: 24px;
    margin-inline-end: 8px;
    margin-bottom: 14px;
  }

  .Dropdown__item-vertical {
    flex-grow: 1;
  }

  .Dropdown__item-label {
    font-weight: 700;
    text-align: start;
  }

  .Dropdown__item-description {
    font-size: 10px;
    margin-top: 4px;
  }

  .Divider {
    flex-basis: 100%;
    width: 100%;
    height: 1px;
    margin: 0;
    position: absolute;
    inset-block-end: -5px;
    inset-inline-start: 0;
  }
}

@mixin oe-modal {
  @extend %modal;
  flex-direction: column;

  .modal-container {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 480px;
  }

  .modal-body {
    padding: 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: var(--font-size-default);
    font-family: var(--font-family);
    gap: 16px;

    .title {
      line-height: 16px;
      font-weight: var(--font-weight-bold);
    }
  }

  .input-container {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .modal-label {
      color: var(--gray-12);
    }

    .ui__input__wrapper {
      width: auto;
      max-width: 216px; // from Figma
    }

    .ui__input {
      border-color: var(--gray-6);
      position: relative;

      &.ui__input--focused {
        box-shadow: none;
        border-color: var(--focus-border);
      }

      &:has(:disabled) {
        border-color: var(--gray-5);
      }
    }

    input {
      padding: 8px 40px 8px 8px;
      height: 32px;
      font-size: var(--font-size-default);
      width: 100%;

      &[type=number] {
        -moz-appearance: textfield;
      }

      &:disabled {
        opacity: 1;
      }
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }

  .flex-half {
    flex-basis: calc(50% - 8px);
  }

  .flex-full {
    flex-basis: 100%;
  }

  .flex-third {
    flex-basis: calc(100% / 3 - 8px);
  }

  .footer {
    padding: 16px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--gray-5);

    button {
      border: none;
      border-radius: 4px;
      background: var(--primary-button);
      min-width: 59px;
      width: auto;
      padding: 8px 16px;
      height: 32px;
      color: var(--primary-button-text);

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

  .unit-dropdown {
    &.Dropdown {
      height: 34px;
    }
  }
}