@import "variables";
@import "mixins";

%sidebar {
  margin: 0;
  padding: 0;
}

#main-sidebar, #product-sidebar {
  @extend %sidebar;

  .widget {
    @include border-radius();
    @include box-shadow();
    background-color: white;

    &-heading {
      @include border-top-radius();
      text-align: center;
      border-bottom: 1px solid #ddd;

      h4 {
        margin: 0;
      }
    }
  }
}

#product-sidebar {
  .widget {
    &-body {
      padding: 0;
    }
  }
}

#footer-sidebar {
  @extend %sidebar;

  .widget {
    &-heading {
      margin: 0;
      padding: 0;
    }

    &-body {
      padding: 0;
    }
  }
}

.widget {
  width: 100%;
  margin-bottom: $space-size-medium;

  &-heading {
    box-sizing: border-box;
    display: block;
    border: none;
    padding: $space-size-small $space-size-medium;
  }

  &-body {
    box-sizing: border-box;
    display: block;
    padding: $space-size-small $space-size-medium;

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
  }
}

.textwidget {
  width: 100%;
  max-width: 100%;
  display: block;

  img {
    max-width: 100%;
  }
}

.tagcloud {
  display: flex;
  flex-flow: row wrap;
  align-items: center;

  a {
    @include border-radius;
    @include font-text;
    display: inline-block;
    box-sizing: border-box;
    padding: 0 $space-size-small;
    margin: $space-size-extra-small $space-size-small $space-size-extra-small 0;
    transition: transform 0.1s ease-in-out;

    &:hover,
    &:focus {
      transform: scale(1.1);
    }
  }
}

#wp-calendar {
  width:100%;
  font-size: 12px;
  font-weight: 300;
  max-width: 400px;
  border-collapse: separate;
  border-spacing: 8px;


  tbody td a,
  tfoot td#prev a:hover,
  tfoot td#next a:hover {
    color: #47C2DC;
  }

  tfoot {
    td#prev a,
    td#next a {
      color:#888;
      font-size:12px;
      font-weight:400;
      position:relative;
      text-transform:uppercase;
      bottom:-9px;
      margin-bottom:1px;
    }

    td#prev {
      text-align:left;
    }

    td#next {
      text-align:right;
    }
  }

  caption {
    display:none;
  }

  thead th {
    font-size:13px;
    font-weight:400;
    color:#888;
    text-align:center;
    padding-bottom:10px;
  }

  tbody td {
    margin-bottom:10px;
    text-align:center;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    border:1px solid #f4f4f4;
    padding: $space-size-extra-small;

    &:hover {
      border-color:#e2e2e2;
    }

    &.pad {
      border:0;
    }

    &#today {
      color:#47C2DC;
      border-color:#47C2DC;
    }
  }
}

#price-comparison {
  .shop {
    width: 100%;
    box-sizing: border-box;
    border-bottom: $price-comparison-shop-border;
    padding: $space-size-small $space-size-medium;

    &:last-child {
      border-bottom: none;
    }

    &-thumbnail {
      height: 100%;
      width: 100%;
      min-height: 75px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: $space-size-small;

      img {
        display: inline-block;
        max-width: 200px;
        width: 100%;
        height: auto;
        margin: auto;
      }
    }

    &-info {
      min-height: 75px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      padding-bottom: $space-size-small;
    }

    &-no-info {
      display: block;
      line-height: $font-line-height-small-text;
      font-size: $font-size-small-text;
    }

    &-price {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;

      &-old {
        font-weight: $font-weight-headline-6;
        line-height: $font-size-headline-6;
        font-size: $font-size-headline-6;
        text-decoration: line-through;
      }

      &-current {
        font-weight: $font-weight-headline-5;
        line-height: $font-size-headline-5;
        font-size: $font-size-headline-5;
      }

      &-indication {
        display: block;
        width: 100%;
        padding-top: $space-size-extra-small;
        line-height: $font-line-height-small-text;
        font-size: $font-size-small-text;
      }
    }

    &-buy {
      height: 100%;
      text-align: center;

      .btn {
        box-sizing: border-box;
        width: 100%;
      }
    }

    &-updated-at {
      display: block;
      width: 100%;
      padding-top: $space-size-small;
      line-height: $font-line-height-small-text;
      font-size: $font-size-small-text;
    }

    &.not-available {
      .shop {
        &-thumbnail {
          img {
            filter: grayscale(75%);
          }
        }
      }
    }
  }
}