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

.jse-navigation-bar-path-editor {
  flex: 1;
  display: flex;
  border: var(--jse-edit-outline);
  background: var(--jse-background-color);

  input.jse-navigation-bar-text {
    flex: 1;
    font-family: inherit;
    font-size: inherit;
    padding: 0 5px 1px;
    background: var(--jse-background-color);
    color: var(--jse-text-color);
    border: none;
    outline: none;
  }

  button {
    border: none;
    background: var(--jse-background-color);
    cursor: pointer;
    font-family: inherit;
    font-size: 80%;
    color: inherit;
  }

  button.jse-navigation-bar-copy {
    &.copied {
      color: var(--jse-message-success-background);
    }
  }

  button.jse-navigation-bar-validation-error {
    color: var(--jse-error-color);
  }

  &.error {
    border-color: var(--jse-error-color);

    input.jse-navigation-bar-text {
      color: var(--jse-error-color);
    }
  }

  .jse-copied-text {
    background: var(--jse-message-success-background);
    color: var(--jse-message-success-color);
    position: relative;
    margin: 2px;
    padding: 0 5px;
    border-radius: $border-radius;
  }
}