$admin-bar-height: 3.5em;
$admin-bar-icon-size: 26.5pt;

.ts-edit-mode { padding-bottom: $admin-bar-height; }

#ts-admin-bar-edit {
  position: fixed;
  z-index: 1000;
  left: 0px;
  bottom: 0px;
  width: $admin-bar-height;
  height: $admin-bar-height;
  button {
    line-height: 1.5em;
    padding: 0px;
    width: 100%;
    height: 100%;
    i {
      font-size: 31.5pt; // 3em;
    }
  }
}

#ts-admin-bar {
  //height: $admin-bar-height;
  position: fixed;
  z-index: 1000;
  background: #fff;
  bottom: -100px;
  left: 0px;
  right: 0px;
  padding: 0px;
  margin: 0px;
  font-family: Tahoma, Geneva, sans-serif;
  transition: bottom .5s;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
  border-top: 1px solid #ccc;
  &.insert-open { bottom: 0px; }
  ul { 
    display: table;
    width: 100%;
    height: $admin-bar-height;
    padding: 0px;
    margin: 0px;
    padding: 0px;
    li {
      display: table-cell;
      margin: 0px;
      padding: 0px;
      vertical-align: middle;

      &.ts-brand {
        background: rgba(27,33,36,0.67);
        color: #fff;
        text-align: center;
        text-transform: uppercase;
        cursor: pointer;
        font-size: $admin-bar-icon-size;
        .smaller { font-size: 0.5em; margin-left: -10px; }
      }

      &.ts-title {
        width: 78%;
        input {
          display: block;
          width: 100%;
          border: 0px;
          outline: none;
          padding: 7px 15px;
          font-size: 1.4em;
        }
      }

      &.ts-actions {
        width: 15%;

        .ts-button-group {
          width: 100%;
        }

        button {
          width: 30%;
          cursor: pointer;
          line-height: 1.5em;
          i {
            font-size: 31pt; // $admin-bar-icon-size;
          }
        }

        .ts-button-primary {
          width: 40%;
        }
      }
    }

  } 
}

#insert-content {
  background: rgba(27, 33, 36, 0.67);
  height: 100px;
  ul li.insert-new { 
    cursor: pointer; 
    margin: 5px 0 0 5px;
    width: 1.4em;
    display: inline-block;
    text-align: center;
    font-size: 40pt;
    transition: color .5s, background-color .5s;
    .insert-icon {
      background-color: rgba(255,255,255,0.2);
      color: #555;
      width: 1.35em;
      height: 1.3em;
      font-size: 1em;
    }
    .insert-name {
      margin-top: 8px;
      overflow: hidden;
      font-size: 10pt;
      line-height: 1em;
      height: 1em;
      color: #fff;
      text-align: left;
    }
    &:hover { 
      .insert-icon { background-color: #428bca; color: #fff; }
    }
  }
}

#ts-admin-bar-settings {
  display: none;
}


#ts-admin-bar-options {
  font-family: Tahoma, Geneva, sans-serif;
  ul:after, li:after { clear: both; display: table; content: ''; }
  ul { padding: 0; margin: 0; }
  li { padding: 5px 10px; display: block; }
  span.icon {
    display: block;
    float: left;
    width: 1.1em;
    height: 1.1em;
    font-size: 24pt;
    padding: 2px;
    text-align: center;
    color: #bbb;
    transition: color 0.5s;
  }
  span.text {
    display: block;
    float: left;
    width: 195px;
    padding: 2px 0 0 10px;
    .large-text {
      font-size: 14px;
      font-weight: bold;
      line-height: 16px;
      color: #555;
    }
    .sub-text {
      max-width: 195px;
      font-size: 12px;
      line-height: 16px;
      color: #888;
    }
  }
  li a:hover {
    span.icon { color: #555; }
    span.text {
      .large-text { color: #111; }
      .sub-text { color: #444; }
    }
  }
}