/* @control dialog */

@import “_base”, “_features”, “_breakpoint”;

gollum-dialog-dialog {

display: block;
overflow: visible;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;

@include mediummobile-breakpoint {
  position: absolute;
  position: fixed;
  width: auto;
  height: auto;
}

@include desktop-breakpoint {
  position: absolute;
  top: 50%;
  left: 50%;
}

&.active {
  display: block;
}

}

gollum-dialog-dialog-inner {

margin: 0px;
width: 100%;
height: 100%;
padding: 1em;
overflow: hidden;
background-color: white;
webkit-box-shadow: 8px 7px 21px 0px rgba(0,0,0,0.68);
moz-box-shadow: 8px 7px 21px 0px rgba(0,0,0,0.68);
box-shadow: 8px 7px 21px 0px rgba(0,0,0,0.68);

@include four-edge-position(0px);

@include mediummobile-breakpoint {
  margin: auto;
  position: fixed;

  width: auto;
  height: auto;

  min-width: 280px;
  min-height: 380px;

  max-width: 450px;
  max-height: 450px;

  @include four-edge-position(10px);

}

@include desktop-breakpoint {
  margin: 0 0 0 -225px;
  position: relative;

  width: 450px;

  @include four-edge-position(auto);
}

}

gollum-dialog-dialog-bg {

padding: 1em;

height: 100%;

@include alt-box-model;

@include mediummobile-breakpoint {
  overflow: hidden;

  @include vertical-gradient(#f7f7f7, #ffffff);
}

@include desktop-breakpoint {
  height: auto;
}

}

gollum-dialog-dialog-body {

font-size: 1.2em;
line-height: 1.6em;

fieldset {
  display: block;
  @include reset-box;
  @include clearfix;

  .field {
    margin: 0 0 1.5em 0;
    padding: 0;

    &:last-child {
      margin: 0 0 1em 0;
    }

    label {
      color: #000;
      display: block;
      font-size: 1.2em;
      font-weight: bold;
      line-height: 1.6em;
      margin: 0;
      padding: 0;
      min-width: 80px;
    }

    input {

      &.code {
        font-family: $font-console;
      }
    }

    span.context {
      font-size: .9em;
      color: #666;

      span.path {
        font-family: $font-console;
        font-weight: bold;
      }
    }
  }
}

}