// =============================================================================
// _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
//       a. Custom Menus and Pages
// =============================================================================

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

.widget-area {

}



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

.widget {
  color: rgba(255, 255, 255, 0.25);

  a {
    color: rgba(255, 255, 255, 0.25);
  }

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

  ul,
  ol {
    margin-left: 0;
    list-style: none;

    li {
      a {
        display: inline-block;
        color: rgba(255, 255, 255, 0.25);
      }
    }

    li li a          { padding-left: 1.655em; }
    li li li a       { padding-left: 3.31em;  }
    li li li li a    { padding-left: 4.965em; }
    li li li li li a { padding-left: 6.62em;  }
  }

  select {
    width: 100%;
  }

  &:before {
    content: "";
    display: block;
    height: 2px;
    background-color: $navbarLinkBorderColor;
  }
}

.x-main .widget,
.x-sidebar .widget {
  color: $navbarBackground;

  a {
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }

  ul,
  ol {
    li {
      border-top: 1px solid rgba(0, 0, 0, 0.085);

      a {
        padding-top: 8px;
        padding-bottom: 8px;
        color: $navbarBackground;
      }
    }
  }

  > ul,
  > ol,
  div > ul,
  div > ol {
    > li:last-child {
      border-bottom: 1px solid rgba(0, 0, 0, 0.085);
    }
  }

  &:before {
    display: none;
  }
}

body .x-main .widget,
body .x-sidebar .widget {
  @include break(cubs) {
    color: $textColor;

    a {
      color: $textColor;

      &:hover {
        color: $textColor;
      }
    }

    ul,
    ol {
      li {
        a {
          color: $textColor;

          &:hover {
            color: $textColor;
          }
        }
      }
    }
  }
}



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

.h-widget {
  margin: 16px 0 12px;
  font-size: 128.6%;
  line-height: 1.3;
  color: $baseModBackground;
}

.x-main .h-widget,
.x-sidebar .h-widget {
  margin-top: 0;
  border: 1px solid $navbarBackground;
  padding: 0.65em 0.65em 0.75em;
  font-size: 85%;
  letter-spacing: 0.15em;
  text-align: center;
  text-transform: uppercase;
  color: $navbarBackground;
  background-color: transparent;
}

body .x-main .h-widget,
body .x-sidebar .h-widget {
  @include break(cubs) {
    color: $headingsColor;
    border-color: $headingsColor;
  }
}



// Individual WordPress Widgets
// =============================================================================

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

.widget_archive {

}

.widget.widget_archive li {

}


//
// 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 {
  margin: 0;
  font-size: 87.5%;

  caption {
    display: none;
  }

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

  th {
    padding: 4.5% 0;
    font-family: $altFontFamily;
    font-weight: 700;
    color: $white;
    background-color: rgba(0, 0, 0, 0.2);
  }

  td {
    border: 0;
    padding: 4.75% 0;
    color: $navbarBackground;
  }

  tbody td {
    background-color: $baseModBackground;
  }

  tfoot td {
    background-color: rgba(0, 0, 0, 0.2);
  }

  #prev,
  #next {
    padding: 3% 0;
    font-size: 87.5%;
    font-family: $altFontFamily;
    line-height: 1;

    a {
      color: $white;
      @include opacity(0.15);
      @include transition(#{opacity 0.3s ease});

      &:hover {
        @include opacity(1);
      }
    }
  }
}

.widget_calendar #prev {

}

.widget_calendar #next {

}

.widget_calendar .pad {

}

.x-main,
.x-sidebar {
  .widget_calendar #wp-calendar {
    th,
    tfoot td {
      background-color: $navbarBackground;
    }
  }
}


//
// 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.widget_categories li,
.widget.widget_product_categories li {

}

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

}

.widget.widget_categories li ul,
.widget.widget_product_categories li ul {

}

.widget_categories select,
.widget_product_categories select {
  margin-bottom: 0;
}


//
// 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 {
  > li:last-child a:first-child {
    border-bottom: 0;
  }
}

.widget_nav_menu #menu-item-___ {

}

.widget.widget_nav_menu li {

}

.widget_nav_menu .sub-menu {

}


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

.widget_meta {

}

.widget.widget_meta ul {
  border-bottom: 0;
}

.widget.widget_meta li {
  abbr[title] {
    border-bottom: 0;
  }
}


//
// 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.widget_pages ul {

}

.widget.widget_pages li {

}

.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.widget_recent_comments a {
  display: inline;
}

.widget_recent_comments #recentcomments {

}

.widget.widget_recent_comments li {
  
}

.widget_recent_comments .url {

}

.x-main,
.x-sidebar {
  .widget.widget_recent_comments li {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}


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

.widget_recent_entries {

}

.widget.widget_recent_entries li {
  padding-bottom: 16px;
  line-height: 1.5;

  &:last-child {
    padding-bottom: 0;
  }

  a {
    display: inline;
  }

  .post-date {
    display: block;
    font-size: 85%;
    margin-top: 0.5em;
    text-transform: uppercase;
    @include opacity(0.575);
  }
}

.x-main,
.x-sidebar {
  .widget.widget_recent_entries li {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}


//
// 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 .h-widget a.rsswidget {
  text-decoration: none;
}

.widget_rss .rsswidget {

}

.widget_rss .rsswidget img {
  display: none;
}

.widget.widget_rss li {
  padding-bottom: 16px;

  &:last-child {
    padding-bottom: 0;
  }

  .rsswidget {
    display: inline-block;
    padding: 0;
    line-height: 1.5;
  }
}

.widget_rss .rss-date {
  display: block;
  font-size: 85%;
  text-transform: uppercase;
  @include opacity(0.575);
}

.widget_rss .rssSummary {
  margin: 0.75em 0;
}

.widget_rss cite {
  display: block;
  font-size: 85%;
  text-transform: uppercase;
  @include opacity(0.575);

  &:before {
    content: "By: "
  }
}

.x-main,
.x-sidebar {
  .widget.widget_rss li {
    padding: 8px 0;
  }
}


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

.widget_search,
.widget_product_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 .tagcloud,
.widget_product_tag_cloud .tagcloud {
  @include clearfix();
}

.widget_tag_cloud .tagcloud a,
.widget_product_tag_cloud .tagcloud a {
  display: inline-block;
  width: 47%;
  color: rgba(255, 255, 255, 0.25);
  @include text-overflow();

  &:nth-child(1n) {
    float: left;
  }

  &:nth-child(2n) {
    float: right;
  }

  &:hover {
    color: $accentColor;
  }
}

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

}

.x-main,
.x-sidebar {
  .widget_tag_cloud .tagcloud a,
  .widget_product_tag_cloud .tagcloud a {
    color: $navbarBackground;
  }
}


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

.widget_text {
  a {
    text-decoration: underline;
  }

  ol,
  ul {
    overflow: visible;
    margin: 0 0 $baseMargin 1.655em;
    border: 0;
    list-style: disc;
    background-color: transparent;

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

.widget_text .textwidget {

}

.x-main .widget_text,
.x-sidebar .widget_text {
  ol,
  ul {
    li {
      border: 0;

      a {
        padding: 0;
      }
    }
  }

  > ul,
  > ol,
  div > ul,
  div > ol {
    > li:last-child {
      border-bottom: 0;
    }
  }
}



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

.x-main,
.x-sidebar {
  .widget.widget_pages .current_page_item,
  .widget.widget_nav_menu .current-menu-item {
    border: 1px solid $headingsColor;
    border-left: 0;
    border-right: 0;
    margin-bottom: -1px;

    a {
      color: $headingsColor;

      &:hover {
        color: $headingsColor;
      }
    }
  }
}

@include break(cubs) {
  body .x-main,
  body .x-sidebar {
    .widget.widget_pages .current_page_item,
    .widget.widget_nav_menu .current-menu-item {
      border: 1px solid $headingsColor;
      border-left: 0;
      border-right: 0;
      margin-bottom: -1px;

      a {
        color: $headingsColor;

        &:hover {
          color: $headingsColor;
        }
      }
    }
  }
}