/*! UIkit 2.20.3 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
/* ========================================================================
   Component: HTML editor
 ========================================================================== */
/* Sub-object `uk-htmleditor-navbar`
 ========================================================================== */

.uk-htmleditor-navbar {
  background: #f5f5f5;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  &:before {
    content: "";
    display: table;
  }
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

/*
 * Micro clearfix
 */

/* Sub-object `uk-htmleditor-navbar-nav`
 ========================================================================== */

.uk-htmleditor-navbar-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  > li {
    float: left;
    > a {
      display: block;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      text-decoration: none;
      /* 1 */
      height: 41px;
      padding: 0 15px;
      line-height: 40px;
      /* 2 */
      color: #444444;
      font-size: 11px;
      cursor: pointer;
      margin-top: -1px;
      margin-left: -1px;
      border: 1px solid transparent;
      border-bottom-width: 0;
      text-shadow: 0 1px 0 #ffffff;
    }
    &:hover > a {
      background-color: #fafafa;
      color: #444444;
      outline: none;
      /* 2 */
      position: relative;
      z-index: 1;
      border-left-color: rgba(0, 0, 0, 0.1);
      border-right-color: rgba(0, 0, 0, 0.1);
      border-top-color: rgba(0, 0, 0, 0.1);
    }
    > a {
      &:focus {
        background-color: #fafafa;
        color: #444444;
        outline: none;
        /* 2 */
        position: relative;
        z-index: 1;
        border-left-color: rgba(0, 0, 0, 0.1);
        border-right-color: rgba(0, 0, 0, 0.1);
        border-top-color: rgba(0, 0, 0, 0.1);
      }
      &:active {
        background-color: #eeeeee;
        color: #444444;
        border-left-color: rgba(0, 0, 0, 0.1);
        border-right-color: rgba(0, 0, 0, 0.1);
        border-top-color: rgba(0, 0, 0, 0.2);
      }
    }
    &.uk-active > a {
      background-color: #fafafa;
      color: #444444;
      border-left-color: rgba(0, 0, 0, 0.1);
      border-right-color: rgba(0, 0, 0, 0.1);
      border-top-color: rgba(0, 0, 0, 0.1);
    }
  }
}

/*
 * 1. Dimensions
 * 2. Style
 */

/*
 * Hover
 * 1. Apply hover style also to focus state
 * 2. Remove default focus style
 */

/* OnClick */

/* Active */

/* Sub-object: `uk-htmleditor-navbar-flip`
 ========================================================================== */

.uk-htmleditor-navbar-flip {
  float: right;
}

/* Sub-object for special buttons
 ========================================================================== */

[data-mode='split'] {
  .uk-htmleditor-button-code, .uk-htmleditor-button-preview {
    display: none;
  }
}

/* Sub-object `uk-htmleditor-content`
 ========================================================================== */

.uk-htmleditor-content {
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  background: #ffffff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  &:before {
    content: "";
    display: table;
  }
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

/*
 * Micro clearfix
 */

/* Modifier `uk-htmleditor-fullscreen`
 ========================================================================== */

.uk-htmleditor-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 990;
  .uk-htmleditor-content {
    position: absolute;
    top: 41px;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .uk-icon-expand:before {
    content: "\f066";
  }
}

/* Sub-objects `uk-htmleditor-code` and `uk-htmleditor-preview`
 ========================================================================== */

.uk-htmleditor-code {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.uk-htmleditor-preview {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px;
  overflow-y: scroll;
  position: relative;
}

/*
 * Tab view
 */

[data-mode='tab'] {
  &[data-active-tab='code'] .uk-htmleditor-preview, &[data-active-tab='preview'] .uk-htmleditor-code {
    display: none;
  }
}

/*
 * Split view
 */

[data-mode='split'] {
  .uk-htmleditor-code, .uk-htmleditor-preview {
    float: left;
    width: 50%;
  }
  .uk-htmleditor-code {
    border-right: 1px solid #eeeeee;
  }
}

/* Sub-object `uk-htmleditor-iframe`
 ========================================================================== */

.uk-htmleditor-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* CodeMirror modifications
 ========================================================================== */

.uk-htmleditor .CodeMirror {
  padding: 10px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*
     * Apply same `border-radius` as `uk-htmleditor-navbar`
     */

.uk-htmleditor-navbar-nav:first-child > li:first-child > a {
  border-top-left-radius: 4px;
}

/*
     * Sub-modifier `uk-htmleditor-navbar-flip`
     */
/* Collapse border */

.uk-htmleditor-navbar-flip .uk-htmleditor-navbar-nav {
  > li > a {
    margin-left: 0;
    margin-right: -1px;
  }
  &:first-child > li:first-child > a {
    border-top-left-radius: 0;
  }
  &:last-child > li:last-child > a {
    border-top-right-radius: 4px;
  }
}

/* Apply same `border-radius` as `uk-htmleditor-navbar` */

/*
     * Sub-modifier `uk-htmleditor-fullscreen`
     */

.uk-htmleditor-fullscreen {
  .uk-htmleditor-navbar {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .uk-htmleditor-content {
    border: none;
    border-radius: 0;
  }
  .uk-htmleditor-navbar-nav > li > a {
    border-radius: 0 !important;
  }
}