@import "variables";

@github-dialog-spacing: @component-padding / 2;

.github-Dialog {
  &Prompt {
    margin: @component-padding;
    text-align: center;
    font-size: 1.2em;
    user-select: none;
  }

  &Form {
    display: flex;
    flex-direction: column;
    padding: @github-dialog-spacing;
  }

  &Label {
    flex: 1;
    margin: @github-dialog-spacing;
    position: relative;
    line-height: 2;

    &--horizontal {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;

      input {
        margin: 0 @component-padding;
      }

      input[type="text"] , input[type="password"] {
        width: 85%;
      }
    }

    .github-AtomTextEditor-container {
      margin-top: @github-dialog-spacing;
    }
  }

  &Footer {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  &Info {
    display: inline-block;
    flex-grow: 1;
    margin: @github-dialog-spacing;
    padding: @github-dialog-spacing;

    li {
      display: inline-block;
    }
  }

  &Buttons {
    flex-grow: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: @github-dialog-spacing;

    // Switch button order on Windows
    .platform-win32 & {
      flex-direction: row-reverse;
      justify-content: flex-start;
    }

    .btn {
      margin: @github-dialog-spacing;
    }

    &-leftItem,
    &-leftItem.btn {
      margin: @github-dialog-spacing;
      margin-right: auto;
    }
  }

  &--insetButton {
    position: absolute;
    background: transparent;
    right: 1em;
    top: 0;
    bottom: 0;
    border: none;
    color: @text-color-subtle;
    cursor: pointer;

    &:hover {
      color: @text-color-highlight;
    }

    &:focus {
      border: solid 1px @button-background-color-selected;
      border-radius: 4px;
    }
  }

  &Spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: @component-padding;

    .loading {
      margin: @component-padding;
    }
  }

  &-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }

  atom-text-editor[mini].editor {
    margin: 0;

    &[readOnly] {
      color: @text-color-subtle;
    }
  }

  // A trick to trap keyboard focus within this DOM element.
  // In JavaScript, attach an event handler to the onTransitionEnd event and reassign focus to the initial element
  // within the dialog.
  &:not(:focus-within) {
    padding-bottom: 1px;
    transition: padding-bottom 0.01s;
  }
}

.github-TabbableWrapper {
  display: flex;
  flex: 1;
}

.github-RepositoryHome {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;

  &-owner {
    flex: 1;

    .Select-control {
      border-color: @button-border-color;
    }

    &.Select--single > .Select-control .Select-value.Select-value {
      background: @button-background-color;
    }

    &.Select.has-value.Select--single > .Select-control .Select-value .Select-value-label {
      color: @text-color;
    }

    .Select-option {
      background: @button-background-color;
      color: @text-color;

      &.is-focused {
        background: @button-background-color-selected;
      }

      &.is-disabled {
        color: @text-color-subtle;
      }
    }

    &Option {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
    }

    &Avatar {
      flex: 0;
      border-radius: @component-padding/4;
      margin: 0 @component-padding 0 0;
    }

    &Unwritable {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
    }
  }

  &-separator {
    flex: 0;
    margin: 0 @component-padding;
  }

  .github-AtomTextEditor-container {
    flex: 1.5;
  }
}

.github-RemoteConfiguration {
  &-details {
    summary {
      cursor: default;
      user-select: none;
      margin: @component-padding 0;

      &:focus {
        border: solid 1px @button-background-color-selected;
        border-radius: 4px;
      }
    }

    main {
      padding-top: @component-padding;
    }
  }

  &-protocol {
    display: inline-flex;
    align-items: center;

    &Heading {
      display: inline-block;
      margin-right: @component-padding;
    }

    &Option {
      display: inline-flex;
      align-items: center;
      padding: @component-padding/4;
      margin-right: @component-padding;

      &:focus-within {
        border: solid 1px @button-background-color-selected;
        border-radius: 4px;
      }
    }
  }

  &-sourceRemote {
    width: 60%;

    label {
      display: flex;
      align-items: center;
      width: 100%;

      .github-AtomTextEditor-container {
        flex: 1;
        margin-left: @component-padding;
      }
    }
  }
}

.github-Create {
  &-visibility {
    display: inline-flex;
    align-items: center;

    &Heading {
      display: inline-block;
      margin-right: @component-padding*2;
    }

    &Option {
      display: inline-flex;
      align-items: center;
      padding: @component-padding/4;
      margin-right: @component-padding;

      &:focus-within {
        border: solid 1px @button-background-color-selected;
        border-radius: 4px;
      }

      span::before {
        margin-left: @component-padding/2;
        margin-right: @component-padding/2;
      }
    }
  }
}
