@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";

.category {
  /* normal */
  position: relative;
  .flex(@direction: column);
  margin-top: 50px;
  color: @COLOR_GRAY08;
  text-align: center;

  div {
    .flex();
    .size(@w: 94px, @h: 94px);
    margin-bottom: 18px;
    border-radius: 48px;
    background-color: @COLOR_GRAY08;
    border: 2px solid @COLOR_GRAY08;

    span {
      .size(@w: 80px, @h:80px);
      background-position: center;
      background-size: cover;

      &.category-icon-1017 {
        // LG Electronics
        background-image: url("../../../../../assets/category/ic-category-lgelectronics-nor@3x.png");
      }

      // Garden and Outdoors
      &.category-icon-1008 {
        background-image: url("../../../../../assets/category/ic-category-garden-nor@3x.png");
      }

      // Fashion
      &.category-icon-1000 {
        background-image: url("../../../../../assets/category/ic-category-fashion-nor@3x.png");
      }

      // Beauty
      &.category-icon-1003 {
        background-image: url("../../../../../assets/category/ic-category-beauty-nor@3x.png");
      }

      // Jewelry
      &.category-icon-1004 {
        background-image: url("../../../../../assets/category/ic-category-jewelry-nor@3x.png");
      }

      // Home
      &.category-icon-1006 {
        background-image: url("../../../../../assets/category/ic-category-home-nor@3x.png");
      }

      // Kitchen & Food
      &.category-icon-1007 {
        background-image: url("../../../../../assets/category/ic-category-kitchen-nor@3x.png");
      }

      // Accessories
      &.category-icon-1014 {
        background-image: url("../../../../../assets/category/ic-category-accessories-nor@3x.png");
      }

      // Heaclth & Fitness
      &.category-icon-1009 {
        background-image: url("../../../../../assets/category/ic-category-health-nor@3x.png");
      }

      // Crafts & Sewing
      &.category-icon-1011 {
        background-image: url("../../../../../assets/category/ic-category-cw-nor@3x.png");
      }

      // Electronics
      &.category-icon-1010 {
        background-image: url("../../../../../assets/category/ic-category-electronics-nor@3x.png");
      }

      // Clearance
      &.category-icon-1013 {
        background-image: url("../../../../../assets/category/ic-category-clearance-nor@3x.png");
      }
    }
  }

  strong {
    height: 60px;
    margin-bottom: 12px;
  }

  &::after {
    content: "";
    .position(@position: absolute, @bottom: 0);
    display: block;
    .size(@w: 100%, @h:6px);
    background-color: transparent;
  }

  /* focused */
  &:focus {
    div {
      background-color: @COLOR_WHITE;
      border: solid 2px @PRIMARY_COLOR_RED;
      box-shadow: 0 0 25px 0 rgba(2, 3, 3, 0.8);

      span {
        // LG Electronics
        &.category-icon-1017 {
          background-image: url("../../../../../assets/category/ic-category-lgelectronics-foc@3x.png");
        }

        // Garden and Outdoors
        &.category-icon-1008 {
          background-image: url("../../../../../assets/category/ic-category-garden-foc@3x.png");
        }

        // Fashion
        &.category-icon-1000 {
          background-image: url("../../../../../assets/category/ic-category-fashion-foc@3x.png");
        }

        // Beauty
        &.category-icon-1003 {
          background-image: url("../../../../../assets/category/ic-category-beauty-foc@3x.png");
        }

        // Jewelry
        &.category-icon-1004 {
          background-image: url("../../../../../assets/category/ic-category-jewelry-foc@3x.png");
        }

        // Home
        &.category-icon-1006 {
          background-image: url("../../../../../assets/category/ic-category-home-foc@3x.png");
        }

        // Kitchen & Food
        &.category-icon-1007 {
          background-image: url("../../../../../assets/category/ic-category-kitchen-foc@3x.png");
        }

        // Accessories
        &.category-icon-1014 {
          background-image: url("../../../../../assets/category/ic-category-accessories-foc@3x.png");
        }

        // Heaclth & Fitness
        &.category-icon-1009 {
          background-image: url("../../../../../assets/category/ic-category-health-foc@3x.png");
        }

        // Crafts & Sewing
        &.category-icon-1011 {
          background-image: url("../../../../../assets/category/ic-category-cw-foc@3x.png");
        }

        // Electronics
        &.category-icon-1010 {
          background-image: url("../../../../../assets/category/ic-category-electronics-foc@3x.png");
        }

        // Clearance
        &.category-icon-1013 {
          background-image: url("../../../../../assets/category/ic-category-clearance-foc@3x.png");
        }
      }
    }

    strong {
      color: @PRIMARY_COLOR_RED;
    }

    &::after {
      background-color: @PRIMARY_COLOR_RED;
    }
  }
}

/* selected */
.selected {
  div {
    background-color: @PRIMARY_COLOR_RED;
    border: solid 2px @PRIMARY_COLOR_RED;
  }

  strong {
    color: @PRIMARY_COLOR_RED;
  }
}
