@import "_variables";

#am-catalog {
  padding: @padding-medium 0;

  .am-catalog-headline {
    margin-bottom: @margin-big;

    h3 {
      display: inline-block;
      margin: 0;
      padding: 0;
    }
  }

  .am-category {
    padding: @padding-medium;
    border: 1px solid @color-divider-gray;
    border-radius: @border-radius;
    cursor: pointer;
    margin-bottom: @margin-big;
    transition: all 0.3s ease;
    background-color: @color-white;

    &:hover {
      box-shadow: 0 0 30px 0 fade(@color-divider-gray, 90%);

      .am-category-title {
        color: @color-accent;
      }
    }

    .am-category-title {
      font-size: @medium-fs;
      line-height: @medium-fs + 8px;
      font-weight: @medium;
      margin: 0 0 @margin-small 0;
      padding: 0;
      border: none;
      white-space: nowrap;
      overflow-x: hidden;
      text-overflow: ellipsis;
    }

    span {
      font-size: @small-fs;
      line-height: @regular-fs;
      font-weight: @regular;
      padding: 0;
      border: none;
      margin: 0;
      display: inline-block;
      vertical-align: middle;
    }

    .am-category-services-thumbs {
      padding: 0 0 0 12px;
      margin: @margin-small 0 0 0;

      img {
        width: 36px;
        height: 36px;
        display: inline-block;
        vertical-align: middle;
        margin-left: -12px;
        border-radius: 50%;
        border: 3px solid @color-white;
      }
    }
  }

  .am-spinner {
    text-align: center;
    padding-top: @padding-big*4;
    padding-bottom: @padding-big*4;
  }
}

#am-category {
  padding: @padding-medium 0;

  .am-category-headline {
    margin-bottom: @margin-big;

    .am-back {
      display: inline-block;
      margin-right: @margin-big;
      font-size: @small-fs;
      font-weight: @medium;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        color: @color-accent;
      }
    }

    h3 {
      display: inline-block;
      margin: 0;
      padding: 0;
    }
  }

  .am-category-service {
    border: 1px solid @color-divider-gray;
    border-radius: @border-radius;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: @margin-big;
    position: relative;

    &:hover {
      box-shadow: 0 0 30px 0 fade(@color-divider-gray, 90%);

      .am-category-service-hover {
        display: block;
        opacity: 1;
      }
    }

    .am-category-service-hover {
      opacity: 0;
      transition: all 0.3s ease;
      position: absolute;
      z-index: 1;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: fade(@color-text-prime, 70%);

      span.am-category-service-title {
        width: 100%;
        text-align: center;
        margin-top: @margin-big;
        padding: 0 @padding-medium;
        color: @color-white;
        white-space: normal;
        overflow-x: visible;
        box-sizing: border-box;
        /*position: absolute;
        top: 10%;
        left: 50%;
        margin-right: -50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);*/
      }

      .el-button {
        color: @color-white;
        border-color: @color-white;
        background: transparent;
        position: absolute;
        bottom: 24px;
        left: 50%;
        margin-right: -50%;
        transform: translateX(-50%);

        span {
          color: @color-white;
        }
      }
    }

    .am-category-service-color {
      color: @color-white;
      text-transform: uppercase;
      border-radius: 50%;
      margin-top: -52px;
      background-color: @color-accent;
      display: block;
      width: 52px;
      height: 52px;
      text-align: center;
      line-height: 53px;
      margin-bottom: @margin-small;

    }

    .am-category-service-image {
      background-image: linear-gradient(90deg, fade(@color-accent, 65%) 0%, @color-accent 100%);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;
      height: 140px;
    }

    .am-category-service-info {
      padding: @padding-big @padding-medium;
      background-color: @color-white;
    }

    .am-category-service-title {
      font-size: @medium-fs;
      line-height: @medium-fs + 8px;
      font-weight: @medium;
      margin: 0 0 @margin-small 0;
      padding: 0;
      border: none;
      white-space: nowrap;
      overflow-x: hidden;
      text-overflow: ellipsis;
    }

    span {
      font-size: @small-fs;
      line-height: @regular-fs;
      font-weight: @regular;
      padding: 0;
      border: none;
      margin: 0;
      display: inline-block;
      vertical-align: middle;
    }

    .am-category-services-thumbs {
      padding: 0 0 0 12px;
      margin: @margin-small 0 0 0;
      overflow: hidden;
      white-space: nowrap;

      img {
        width: 36px;
        height: 36px;
        display: inline-block;
        vertical-align: middle;
        margin-left: -12px;
        border-radius: 50%;
        border: 3px solid @color-white;
      }
    }
  }

  .am-spinner {
    text-align: center;
    padding-top: @padding-big*4;
    padding-bottom: @padding-big*4;
  }
}