//
// @file
// Basic styling for common markup.
//
// This file is a duplicate of the Drupal 7 system.theme.css. It simplifies
// selectors, formats with sass, and leverages variables and mixins.
//

/**
 * Markup generated by theme_tablesort_indicator().
 */
th.active {
  img {
    display: inline;
    margin: 0 $rhythm-space-short;
  }
}

td.active {
  background-color: $color-background-alternate;
}

/**
 * Markup generated by Form API.
 */
.option {
  display: inline;
}

.form-type-radio,
.form-type-checkbox {
  .description {
    margin-left: $inset-space-short;
  }
}

.form-checkbox,
.form-radio {
  vertical-align: middle;
}

.marker,
.form-required {
  color: $color-warning;
}

.error {
  border-color: $color-error;
}

/**
 * Inline items.
 */
.container-inline {
  .form-actions,
  &.form-actions {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/**
 * Markup generated by theme_more_link() and theme_more_help_link().
 */
.more-link,
.more-help-link {
  [dir="ltr"] & {
    text-align: right; /* LTR */
  }

  [dir="rtl"] & {
    text-align: left; /* RTL */
  }
}

.more-help-link {
  a {
    &:before {
      content: "?";
      @include box-sizing(border-box);
      display: inline-block;
      position: relative;
      top: -.1em;
      width: $line-height;
      height: $line-height;
      margin: $rhythm-space-short;
      padding: {
        top: ($line-height - 1em) / 2;
        bottom: ($line-height - 1em) / 2;
      }
      font: {
        size: .9em;
        weight: $font-bold;
      }
      line-height: 1em;
      text-align: center;
      background-color: $color-highlight;
      @include border-radius(50%);
      color: $color-text-reverse;
    }
  }
}

/**
 * Markup generated by theme_pager().
 */
.pager {
  clear: both;
  text-align: center;
}

.pager-first,
.pager-previous,
.pager-item,
.pager-ellipsis,
.pager-current,
.pager-next,
.pager-last {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0 $rhythm-space-short;
}

.pager-current {
  font-weight: $font-bold;
}

/**
 * Autocomplete.
 *
 * @see autocomplete.js
 */
/* Suggestion list */
#autocomplete {
  background: $color-background;
  border-color: $color-border;

  li {
    @include single-transition(background-color, .2s);

    &:hover {
      cursor: pointer;
    }

    &.selected {
      background: $color-background-highlight;
    }
  }
}

/**
 * Collapsible fieldsets.
 *
 * @see collapse.js
 */

fieldset {
  &.collapsible {
    .fieldset-legend {
      &:after {
        position: relative;
        top: (($line-height - 1em) / 2);
        display: inline-block;
        content: '\2303';
        color: $color-link-alternate;
        @include transition(top .2s, transform .2s);
      }
    }
  }

  &.collapsed {
    .fieldset-legend {
      &:after {
        top: -(($line-height - 1em) / 2);
        @include scaleY(-1);
      }
    }
  }

  html.js[dir="ltr"] & {
    &.collapsible {
      .fieldset-legend {
        &:after {
          margin-right: $rhythm-space-short;
        }
      }
    }
  }

  html.js[dir="rtl"] & {
    &.collapsible {
      .fieldset-legend {
        &:after {
          margin-left: $rhythm-space-short;
        }
      }
    }
  }
}

.fieldset-legend {
  .summary {
    color: $color-text-light;
    font-size: $font-size-small;

    /*[dir="ltr"] & {
      margin-left: $rhythm-space-short;
    }

    [dir="rtl"] & {
      margin-right: $rhythm-space-short;
    }*/
  }
}

/**
 * TableDrag behavior.
 *
 * @see tabledrag.js
 */
.draggable {
  @include transition(background-color .2s);
}

tr.drag {
  background-color: $color-background-highlight;
}

.drag-previous {
  background-color: tint($color-background-highlight, 60);
}

.tabledrag-toggle-weight {
  font-size: $font-size-small;
}

.tabledrag-changed-warning {
  margin-bottom: $rhythm-space-short;
}

/**
 * TableSelect behavior.
 *
 * @see tableselect.js
*/
.selected {
  td {
    background: $color-background-highlight;
  }
}

td,
th {
  &.checkbox {
    text-align: center;
  }
}

/**
 * Progress bar.
 *
 * @see progress.js
 */
.progress {
  .bar {
    background: $color-background-alternate;
    border-color: $color-highlight;
    @include border-radius;
  }

  .filled {
    background: tint($color-highlight, 80);
  }

  .percentage {
    font-weight: bold;
    @include opacity(.6);
  }
}
