.prd-block {
  .size-list {
    display: flex;
    flex-wrap: wrap;
    margin: -5px 0 0;
    padding: 0;
    list-style: none;
    li {
      @include flex-inline();
      justify-content: center;
      position: relative;
      vertical-align: bottom;
      margin: 5px 7px 0 0;
      @media (max-width: $screen-sm-max) {
        margin-right: 5px;
      }
      a {
        display: block;
        text-decoration: none;
      }
      span.value {
        display: inline-block;
        min-width: 33px;
        height: 33px;
        padding: 0 5px;
        background-color: $product-page-size-list_bg;
        color: $product-page-size-list_color;
        font-size: 14px;
        line-height: 33px;
        font-weight: 500;
        text-align: center;
        border-radius: 4px;
      }
      span.value:after {
        display: none;
        position: relative;
        top: 1px;
        padding: 0 0 0 6px;
        font-family: 'icon-foxic';
        content: "\e117";
        font-size: 12px;
      }
      &.active,
      &:hover:not(.absent-option) {
        span.value {
          background-color: $product-page-size-list-active_bg;
          color: $product-page-size-list-active_color;
        }
      }
    }
    li.absent-option > a {
      cursor: default;
      pointer-events: none;
      span.value {
        color: $product-page-size-list-absent_color;
        border-color: $product-page-size-list-absent_bg;
      }
    }
    li.absent-option > a:after {
      position: absolute;
      z-index: 1;
      content: '';
      background: url(cross_color.png) rgba(255, 255, 255, .75);
      background-size: 100% 100%;
      display: block;
      left: 3px;
      right: 3px;
      top: 3px;
      bottom: 3px;
      opacity: .75;
    }
  }
  .images-list {
    display: flex;
    flex-wrap: wrap;
    margin: -5px 0 0;
    padding: 0;
    list-style: none;
    li {
      @include flex-inline();
      justify-content: center;
      position: relative;
      vertical-align: bottom;
      margin: 5px 7px 0 0;
      @media (max-width: $screen-sm-max) {
        margin-right: 5px;
      }
      a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        min-height: 30px;
        text-decoration: none;
        font-size: 14px;
        line-height: 33px;
        font-weight: 500;
        text-align: center;
        border-radius: 4px;
        transition: none;
        img {
          border-radius: 4px;
        }
      }
      &.active,
      &:hover:not(.absent-option) {
        a {
          color: $product-page-size-list-active_color;
          &:after {
            position: absolute;
            z-index: 1;
            content: '';
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            border: 1px solid $product-page-size-list-active_bg;
            border-radius: 4px;
          }
        }
      }
    }
    li.absent-option > a {
      cursor: default;
      pointer-events: none;
        color: $product-page-size-list-absent_color;
        border-color: $product-page-size-list-absent_bg;
    }
    li.absent-option > a:after {
      position: absolute;
      z-index: 1;
      content: '';
      background: url(cross_color.png) rgba(255, 255, 255, .75);
      background-size: 100% 100%;
      display: block;
      left: 1px;
      right: 1px;
      top: 1px;
      bottom: 1px;
      opacity: .75;
    }
  }
}

.prd-block .images-list li {
  min-height: 30px;
  a .color-list-value {
    display: block;
    width: 100%;
    border-radius: 4px;
  }
  &:hover:not(.absent-option) a .color-list-value,
  &.active a .color-list-value {
    background: $product-page-size-list-active_bg;
  }
}