$spacing: 10px;
$screen-sm: 600px;

$bg: #fff;
$gray: #eee;
$gray-dark: darken($gray, 20%);
$danger: scale-color(#f00, $lightness: 90%);
$danger-dark: darken($danger, 60%);
$info: scale-color(#0f0, $lightness: 90%);
$info-dark: darken($info, 60%);
$primary: scale-color(#06f, $lightness: 90%);

$monospace: Consolas, monospace;

*, ::before, ::after {
  position: relative;
  box-sizing: border-box;
}

body, button, input, textarea {
  font-family: Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 12px;
}

p, h1 {
  margin: 0px;
}

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0px;
  display: flex;
  flex-direction: column;
}

.input-url1 { display: none !important; }

.monospaced {
  font-family: $monospace;
}

.header {
  background-color: $gray;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: $spacing;
  flex: none;
}

.main {
  display: flex;
  flex: 1 0 auto;
  padding: $spacing;
  flex-direction: column;
}

.main-form {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.main-textarea-container {
  flex: 1 0 auto;
  display: flex;
}

.main-textarea {
  width: 100%;
}

.settings {
  display: flex;
  margin: $spacing (-$spacing/2) 0px;
}

.settings-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0px $spacing/2;

  @media (min-width: $screen-sm) {
    flex: none;
  }
}

.settings-label {
  margin-bottom: $spacing/2;
}

.actions {
  display: flex;
}

.action {
  flex: 1;
  @media (min-width: $screen-sm) {
    flex: none;
  }
  margin: 0px $spacing/2;
}

.alert {
  padding: $spacing;
  flex: none;
}

.alert-danger {
  background-color: $danger;
}

.alert-info {
  background-color: $info;
}

.field_with_errors {
  display: flex;
  width: 100%;
  border: 1px solid $danger-dark;
}

.paste-content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.paste-nav {
  display: flex;
  justify-content: space-between;
  margin: 0px (-$spacing/2);
}

.paste-nav-item {
  flex: 1 1 0px;
  text-align: center;
  border: 1px solid $gray-dark;
  margin: 0px $spacing/2 $spacing;
  padding: $spacing;

  &:hover {
    background-color: $gray-dark;
  }
}

.active {
  background-color: $gray;
}

.paste-plain {
  background-color: $gray;
  margin: 0px;
  border: 1px solid $gray-dark;
  flex: none;
}

.line {
  background-color: $bg;
  flex: 1;
}

.paste-nav--bottom {
  margin-top: $spacing;
  margin-bottom: 0px;
}

.settings-item--inline {
  flex-direction: row;
  flex: 1;
}

.action--horizontal-minimum {
  margin: 0px;
  flex: none;
}

.settings-group {
  display: flex;
  flex-direction: column;
  width: 100%;

  @media (min-width: $screen-sm) {
    flex-direction: row;
    justify-content: space-between;
  }
}

.btn {
  box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.1) inset;
  border: 0px;
  background-color: $gray;
  cursor: pointer;
  padding: $spacing ($spacing*2);
}

@mixin btn-color($color) {
  background-color: $color;

  &:hover {
    background-color: darken($color, 10%);
  }

  &:focus {
    background-color: darken($color, 20%);
  }
}

.btn--primary {
  @include btn-color($primary);
}

.btn--danger {
  @include btn-color($danger);
}

.btn--min-width {
  flex: none;
}