.browser-preview-widget {
  & &__browser-bar {
    background-color: var(
      --wds-color-fill-surface-default,
      var(--wsr-color-D80, #ffffff)
    );
    border-bottom: 1px solid
      var(--wds-color-black-600, var(--wsr-color-D60, #dfe5eb));
  }

  &--browser-bar-size-size9 &__browser-bar {
    height: 9px;
  }

  &--browser-bar-size-size12 &__browser-bar {
    height: 12px;
  }

  &--browser-bar-size-size18 &__browser-bar {
    height: 18px;
  }

  &--browser-bar-size-size24 &__browser-bar {
    height: 24px;
  }

  & &__circles-container {
    display: flex;
    flex-direction: row;
  }

  &--browser-bar-size-size9 &__circles-container {
    padding: 3px 0;
    margin-left: 1px;
  }

  &--browser-bar-size-size12 &__circles-container {
    padding: 4px 0;
    margin-left: 1px;
  }

  &--browser-bar-size-size18 &__circles-container {
    padding: 6px 0;
    margin-left: 2px;
  }

  &--browser-bar-size-size24 &__circles-container {
    padding: 7px 0 8px 0;
    margin-left: 3px;
  }

  & &__circle {
    background-color: var(--wds-color-black-500, var(--wsr-color-D50, #acafc4));
  }

  &--browser-bar-size-size9 &__circle {
    width: 3px;
    height: 3px;
    border-radius: 1.5px;
    margin-left: 2px;
  }

  &--browser-bar-size-size12 &__circle {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    margin-left: 3px;
  }

  &--browser-bar-size-size18 &__circle {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    margin-left: 4px;
  }

  &--browser-bar-size-size24 &__circle {
    width: 9px;
    height: 9px;
    border-radius: 4.5px;
    margin-left: 6px;
  }
}