@import "compass/css3/images";
@import "compass/css3/border-radius";
@import "compass/css3/text-shadow";
@import "compass/css3/box-shadow";
@import "buttons";
@import "helpers";

#editable-elements {

  .nav {
    display: block;
    width: 100%;
    height: 31px;

    border-bottom: 1px solid #ccced7;

    @include border-top-radius(8px);
    @include background-image(linear-gradient(#ebedf4, #d7dbe7));

    a {
      float: left;
      display: block;

      line-height: 31px;
      padding: 0px 20px 0 20px;

      color: #8b8d9a;
      @include single-text-shadow(#fff, 1px, 1px, 1px);
      text-decoration: none;
      text-transform: capitalize;
      font-size: 13px;
      cursor: pointer;
      outline: none;

      &.on {
        @include background-image(linear-gradient(#d9dde9, #ebedf4));

        height: 32px;

        color: #1e1f26;
        font-weight: bold;

        border-right: 1px solid #f8f9fb;
        border-left: 1px solid #f8f9fb;

        @include box-shadow(rgba(193, 197, 207, 0.4) -1px 0px 0px 0px inset, rgba(193, 197, 207, 0.4) -1px 0px 0px 0px);
      }

      &:first-child {
        &.on {
          @include border-top-left-radius(8px);
          border-left: none;
          @include box-shadow(rgba(193, 197, 207, 0.4) -1px 0px 0px 0px inset);
        }
      }
    } // a
  } // .nav

  fieldset {
    ol {
      border-top: none;

      li.file {
        span.file {
          a:first-child {
            @include hover-link;

            margin-right: 20px;

            color: #1F82BC;

            &.deleted {
              text-decoration: line-through;
            }
          }

          a.change, a.delete {
            @include blue-button;

            margin-left: 5px;
          }
        }
      }
    }
  } // fieldset

}