// =============================================================================
// _WIDGETS.SCSS
// -----------------------------------------------------------------------------
// Site styles.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Widget Area
//   02. Individual Widget
//   03. Widget Headings
//   04. Individual WordPress Widgets
//       a. Archive
//       b. Calendar
//       c. Categories
//       d. Custom Menu
//       e. Meta
//       f. Pages
//       g. Recent Comments
//       h. Recent Posts
//       i. RSS
//       j. Search
//       k. Tag Cloud
//       l. Text
//   05. WordPress Widget Groups
// =============================================================================

// Widget Area
// =============================================================================

.widget-area {

}



// Individual Widget
// =============================================================================

.widget {
  .h-widget:before {
    // margin-right: 0.2em;
    // border-right: 2px solid;
  }

  p,
  ul,
  ol {
    &:last-child {
      margin-bottom: 0;
    }
  }

  ul,
  ol {
    margin-left: 0;
    border-top: 1px solid $widgetBorderColor;
    list-style: none;

    li {
      border-bottom: 1px solid $widgetBorderColor;
      padding: 0.65em 0;
      line-height: 1.5;
      background-color: $baseModBackground;
    }
  }

  select {
    width: 100%;
  }
}



// Widget Headings
// =============================================================================

.h-widget {
  margin: 0 0 0.65em;
  font-size: 170%;
  line-height: 1.1;
}



// WordPress Widget Classes
// =============================================================================

//
// Archive.
// Outputs a <ul> or <select> of links to old posts.
//

.widget_archive {

}

.widget_archive {
  .h-widget:before {
    // margin-right: 0.25em;
  }
}


//
// Calendar.
// Ouputs a <div> with a "calendar_wrap" ID around a <table> with a
// "wp-calendar" ID. Blank cells in the <thead>, <tfoot>, and <tbody> receive
// a "pad" class.
//

.widget_calendar {

}

.widget_calendar #calendar_wrap {

}

.widget_calendar #wp-calendar {
  background-color: transparent;

  caption {
    font-size: 114.2%;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: $headingsColor;
  }

  th,
  td {
    line-height: 1;
    text-align: center;
  }

  th {
    border-bottom: 2px solid $headingsColor;
    padding: 3% 0;
    font-family: $altFontFamily;
    font-weight: 700;
    color: $headingsColor;
  }

  td {
    padding: 4.75% 0;
  }

  tbody td {
    border: 1px solid darken($baseModBackground, 10%);
    background-color: $baseModBackground;

    &.pad {
      &:first-child {
        border-left: 0;
      }

      &:last-child {
        border-right: 0;
      }
    }
  }

  #prev,
  #next {
    padding: 4.5% 0;
    font-family: $altFontFamily;
    font-weight: 300;
    line-height: 1;
    text-shadow: none;
    text-transform: uppercase;

    a {
      color: darken($baseModBackground, 25%);

      &:hover {
        color: darken($baseModBackground, 50%);
      }
    }
  }
}

.widget_calendar #prev {

}

.widget_calendar #next {

}

.widget_calendar .pad {

}


//
// Categories.
// Ouputs a <ul> of links to post categories. <li> elements receive two
// different classes, "cat-item" and "cat-item-___", where "___" is the unique
// number assigned to that category item.
//

.widget_categories,
.widget_product_categories {

}

.widget_categories .cat-item,
.widget_product_categories .cat-item {

}

.widget_categories .cat-item-___,
.widget_product_categories .cat-item-___ {

}


//
// Custom menu.
// Outputs a <div> container with a class of "menu-___-container", where "___" is
// the name given to the WordPress Menu (e.g. "Secondary Menu" becomes
// "menu-secondary-menu-container"). Additionaly, a <ul> with an ID of "menu-___"
// is output (e.g. "menu-secondary-menu") and a class of "menu" as well.
// Finally, a unique ID and an assortment of classes are output on the <li>
// elements, including and ID of "menu-item-___", where "___" is the unique ID
// number of that item, and multiple classes, including "menu-item".
//

.widget_nav_menu {

}

.widget_nav_menu .menu-___-container {

}

.widget_nav_menu #menu-___ {

}

.widget_nav_menu .menu {

}

.widget_nav_menu #menu-item-___ {

}

.widget_nav_menu .menu-item {

}

.widget_nav_menu .current-menu-item {
  > a {
    position: relative;

    &:after {
      content: "\f053";
      display: inline-block;
      margin-left: 0.45em;
      @include font-awesome();
    }
  }
}


//
// Meta.
// Outputs a <ul> of links for various WordPress functions.
//

.widget_meta {

}


//
// Pages.
// Outputs a <ul> of links to static pages. Each <li> receives classes of
// "page_item" and "page-item-___", where "___" is a unique ID for that item.
// Additionally, child pages are placed in a sub <ul> with a class of
// "children" and have the same classes as top-level items.
//

.widget_pages {

}

.widget_pages .page_item {

}

.widget_pages .page-item-___ {

}

.widget_pages .children {

}


//
// Recent comments.
// Outputs a <ul> with an ID of "recentcomments" and <li> elements with a class
// of recentcomments". Each <li> follows a format of a link surrounding the
// comment author's name (if they input a site) with a class of "url" then
// plain text with the word "on" followed by another link to the actual post.
//

.widget_recent_comments {

}

.widget_recent_comments #recentcomments {

}

.widget_recent_comments .recentcomments {

}

.widget_recent_comments .url {

}


//
// Recent posts.
// Outputs a <ul> of links to the most recent posts on the site.
//

.widget_recent_entries {

}


//
// RSS.
// First outputs two links with a class of "rsswidget", one is an icon that
// links to the feed and the other is text that links to the actual site. Next,
// a <ul> is output with links to the actual articles (descriptions, et cetera
// are optional). The actual link to the article inside each <li> also gets a
// class of "rsswidget", followed by a <span> surrounding the date with a class
// of "rss-date", then a <div> with a class of "rssSummary", and finally a
// <cite> tag surrounding the author's name.
//

.widget_rss {

}

.widget_rss .rsswidget {

}

.widget_rss .rsswidget img {
  display: none;
}

.widget_rss .rss-date {

}

.widget_rss .rssSummary {

}

.widget_rss cite {

}


//
// Search.
// Outputs the search form from searchform.php in the site's template files.
//

.widget_search {

}


//
// Tag cloud.
// Outputs a <div> with a class of "tagcloud" that contains links of all tags.
// Each link receives a "tag-link-___" class, where "___" is a unique ID assisnged
// to that item.
//

.widget_tag_cloud,
.widget_product_tag_cloud {

}

.widget_tag_cloud,
.widget_product_tag_cloud {
  .h-widget:before {
    // margin-right: 0.25em;
  }
}

.widget_tag_cloud .tagcloud a,
.widget_product_tag_cloud .tagcloud a {
  display: inline-block;
  position: relative;
  margin-top: 0.35em;
  padding: 0.375em 0.675em 0.475em;
  cursor: pointer;
  line-height: 1.3;
  text-align: center;
  vertical-align: middle;
  color: $white;
  background-color: $headingsColor;

  &:hover {
  	color: $white;
    background-color: $linkColorHover;
  }
}

.widget_tag_cloud .tag-link-___,
.widget_product_tag_cloud .tag-link-___ {

}


//
// Text.
// Outputs a <div> with a class of "textwidget" that holds the widget content.
//

.widget_text {

}

.widget_text {
  .h-widget:before {
    // margin-right: 0.3em;
  }
}

.widget_text .textwidget ul {
  margin: 0 0 $baseMargin 1.655em;
  border-top: 0;
  list-style: disc;

  li {
    border-bottom: 0;
    padding: 0;
    line-height: $baseLineHeight;
  }

  &.x-ul-icons {
    list-style: none;
  }
}



// WordPress Widget Groups
// =============================================================================

.widget_categories ul,
.widget_product_categories ul,
.widget_nav_menu ul,
.widget_pages ul {
  border-top: 0;
  border-bottom: 1px solid $widgetBorderColor;

  ul {
    border: 0;
  }

  > li {
    border-top: 1px solid $widgetBorderColor;
    border-bottom: 0;
    padding: 0;

    a {
      display: inline-block;
      margin: 0.65em 0;
    }
  }

  li li a {
    margin-left: 25px;
  }

  li li li a {
    margin-left: 50px;
  }

  li li li li a {
    margin-left: 75px;
  }
}