@import '../../../../scss/styles.scss';

@layer payload-default {
  .live-preview-toolbar-controls {
    display: flex;
    align-items: center;
    gap: calc(var(--base) / 3);

    &__breakpoint {
      border: none;
      background: transparent;
      height: var(--base);

      &:focus {
        outline: none;
      }
    }

    &__device-size {
      display: flex;
      align-items: center;
    }

    &__size {
      width: 50px;
      height: var(--base);
      display: flex;
      align-items: center;
      border: 1px solid var(--theme-elevation-200);
      background: var(--theme-elevation-100);
      border-radius: 2px;
      font-size: small;
    }

    &__zoom {
      width: 55px;
      border: none;
      background: transparent;
      height: var(--base);

      &:focus {
        outline: none;
      }
    }

    &__external {
      flex-shrink: 0;
      display: flex;
      width: var(--base);
      height: var(--base);
      align-items: center;
      justify-content: center;
      padding: 6px 0;
    }

    .popup-button {
      display: flex;
      align-items: center;
    }
  }
}