$component: 'rates';
$template: 'template-6';
$item: 'widget-item';

@mixin transition ($property, $time) {
  -webkit-transition-property: $property;
  -moz-transition-property: $property;
  -ms-transition-property: $property;
  -o-transition-property: $property;
  transition-property: $property;
  -webkit-transition-duration: $time;
  -moz-transition-duration: $time;
  -ms-transition-duration: $time;
  -o-transition-duration: $time;
  transition-duration: $time;
}
@mixin border-radius ($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.widget.c-#{$component}.c-#{$component}-#{$template} {
  .widget-overhead {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2.8px;
    color: #444444;
    margin-bottom: 10px;
  }
  .widget-items-wrap {
    overflow-y: hidden;
    padding-bottom: 10px;
  }
  .widget-items {
    display: table;
    min-width: 100%;
  }
  .widget-item-head {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    position: relative;
  }
  .widget-item-head-property-name {
    display: table-cell;
    padding: 25px;
    width: 40%;
    background: #FAFAFA;
    position: sticky;
    left: 0;
    z-index: 1;
  }
  .widget-item-head-property {
    text-align: center;
    display: table-cell;
    padding: 18px 30px;
    background: #E6F1F8;
    color: #2D9CDB;

    &:nth-child(1) {
      background: #FAFAFA;
    }
    &:nth-child(2),
    &:nth-child(4n + 2) {
      background: #DDF3E7;
      color: #219653;
    }
    &:nth-child(3),
    &:nth-child(4n + 3) {
      background: #EBE2F3;
      color: #9B51E0;
    }
    &:nth-child(4),
    &:nth-child(4n + 4) {
      background: #F4E1E1;
      color: #EB5757;
    }
  }
  .widget-item,
  .widget-item-property-name {
    position: relative;
    background: #fafafa;
    display: table-row;
  }
  .widget-item:nth-child(2n) {
    background: #fff;
  }
  .widget-item:nth-child(2n) .widget-item-property-name {
    background: #fff;
  }
  .icon-available {
    display: inline-block;
    background: url('images/available.png') no-repeat center;
    background-size: contain;
    width: 20px;
    height: 20px;
  }
  .icon-unavailable {
    display: inline-block;
    background: url('images/unavailable.png') no-repeat center;
    background-size: contain;
    width: 20px;
    height: 20px;
  }
  .widget-item-property {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #1B1E25;
    display: table-cell;
    padding: 18px 24px;
    vertical-align: middle;
  }
  .widget-item-property-name {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #808080;
    display: table-cell;
    padding: 18px 24px;
    position: sticky;
    left: 0;
    z-index: 1;
  }
  .widget-item-head-mobile {
    display: none;
    font-weight: bold;
    margin-bottom: 5px;
  }

  .widget-item-discount-wrap + .widget-item-price-value {
    margin-top: 4px;
  }
  .widget-item-discount-wrap {
    font-size: 14px;
    line-height: 24px;
  }
  .widget-item-discount-value {
    white-space: nowrap;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    text-align: left;
    text-decoration-line: line-through;
    color: #B0B0B0;
  }
  .widget-item-price-wrap {
    font-size: 18px;
    line-height: 24px;
  }
  .widget-item-price-value {
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 24px;
    text-align: left;
    color: #1B1E25;
    white-space: nowrap;
  }
  .widget-item-sticker {
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 12px;
    color: #FFFFFF;
    padding: 6px 8px;
    margin-left: 8px;
    @include border-radius(2px);
  }

  .widget-item-price-wrap +
  .widget-item-button-wrap {
    margin-top: 16px;
  }

  .widget-item-button {
    padding: 15px 27px;
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #404040;
    border: 1px solid #F2C94C;
    white-space: nowrap;

    @include border-radius(2px);

    &:hover {
      background: #F2C94C;
    }
  }

  .widget-item-price-block-wrap {
    .widget-item-property {
      padding: 24px 20px;
    }
  }

  @media all and (max-width: 768px) {
    .widget-item-head-property-name,
    .widget-item-head-property,
    .widget-item-property-name,
    .widget-item-property {
      padding: 10px;
    }
    .widget-item-price-block-wrap {
      .widget-item-property {
        padding: 10px;
      }
    }
    .widget-item-property-name,
    .widget-item-property {
      font-size: 12px;
    }

    .widget-item-discount-value {
      font-size: 12px;
    }
    .widget-item-price-value {
      font-size: 14px;
    }

    .widget-item-sticker {
      font-size: 10px;
      line-height: 10px;
    }

    .icon-available {
      width: 24px;
      height: 24px;
    }
    .icon-unavailable {
      width: 24px;
      height: 24px;
    }
  }

}