//definitions
%skin-border-color {
  border-color: $skin;
}
%skin-background-color {
  background-color: $skin;
}
%skin-light-border-color {
  border-color: $skin-light;
}
%skin-color {
  color: $skin;
}
%skin-dark-color {
  color: $skin-dark
}
%skin-dark-background-color {
  background-color: $skin-dark;
}
%skin-dark-border-color {
  border-color: $skin-dark;
}


//form focus color
input:not([type='submit']):not([type='button']):not([type='number']):not([type='checkbox']):not([type='radio']):focus,
textarea:focus {
  @extend %skin-light-border-color;
}

input[type=radio]:checked::before {
  @extend %skin-background-color;
}

input[type=checkbox]:checked::before {
  @extend %skin-color;
}

//header top border
.tc-header.border-top {
  border-top-color: $skin;
}

.post-info a:not(.btn) {
    &:hover {
      color: $skin-link-color-hover;
      span::after, span::before {
        @extend %skin-dark-background-color;
      }
    }
}

//All grids Icons

//specific for classical
.grid-container__classic .post-type__icon {
    //SKINNED
    background-color: $skin-link-color;
    .icn-format {
      color: $skin-link-color-hover;
    }
    &:hover {
      @extend %skin-dark-background-color;
    }
}

.post-type__icon {
    &:hover {
      .icn-format {
        color: $skin-link-color;
      }
    }
}

//Post list titles
[class*="grid-container__"] .hover .entry-title a {
  color: $skin-link-color-hover;
  &::after {
    @extend %skin-dark-background-color;
  }
}
[class*="grid-container__"] .entry-title a:hover {
  color: $skin-link-color;
  &::after {
    @extend %skin-dark-background-color;
  }
}

//Grid classic with border bottom
.grid-container__classic.tc-grid-border .grid__item {
  @extend %skin-dark-border-color;
}

//sidebar widget underline
.sidebar .widget-title::after {
  @extend %skin-dark-background-color;
}

//Widget areas
//
// Widget link underline on hover effect
//
.czr-link-hover-underline {
  .widgets-list-layout-links, //<-jetpack top post/pages textual links only
  .widget_archive,
  .widget_nav_menu,
  .widget_rss ul,
  .widget_recent_entries,
  .widget_product_categories,//<- woocommerce widget
  .widget_categories,
  .widget_meta,
  .widget_recent_comments,
  .widget_pages,
  .widget_calendar {
    a:not(.btn)::before {
      @extend %skin-dark-background-color;
    }
  }
}

.widget-area {
    a:not(.btn):hover {
      color: $skin-link-color-hover;
    }
}

.pagination {
  color: $skin-dark;
}


//link format
a.czr-format-link {
  &:hover,
  .format-link.hover & {
    color: $skin-link-color-hover;
  }
  &::before {
    @extend %skin-dark-background-color;
  }
}

//comments and active tabs underline
.comment-author a::before,
.comment-link::before {
  @extend %skin-dark-background-color;
}


.tabs .nav-link {
    &:hover, &.active, &.active:hover, &.active:focus {
      @extend %skin-dark-color;
    }
    &.active::before {
      @extend %skin-dark-background-color;
    }
}


//PLUGINS
.woocommerce {
  .woocommerce-error-list,
  .woocommerce-message,
  .woocommerce-info {
    @extend %skin-border-color;
  }
  #content div.product .woocommerce-tabs ul.tabs li {
    &.active a::before {
        @extend %skin-dark-background-color;
    }
  }
}