require('../../utils/styles/colors.js');

.categoriesItem {
  text-align: center;
  width: 170px;
  height: 170px;

  &.disabled {
    .categoriesImage, .categoriesImage:hover {
      background: $ambar_100;
      border: 4px solid $ambar_300;
      cursor: not-allowed;
      opacity: .75;

      .categoriesIcon {
        color: $ambar_300;
      }
    }

    .categoriesCard {
      .categoriesTitle {
        color: $ambar_300;
      }
    }
  }

  .categoriesImage {
    display: flex;
    margin: 0 auto;
    border: 4px solid $ambar_400;
    border-radius: 50%;
    width: 140px;
    height: 140px;
    background: $white;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;

    &:hover {
      background: $ambar_400;
      .categoriesIcon {
        color: $white;
      }
    }

    svg {
      display: inline-flex;
    }

    .categoriesIcon {
      color: $ambar_400;
    }
  }

  .categoriesCard {
    padding: 5px 5px 0 5px;
    opacity: 0;

    .categoriesTitle {
      background: transparent;
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
      color: $ambar_400;
    }

    &.active {
      opacity: 1;
    }
  }

  &:hover .categoriesCard,
  &.active .categoriesCard{
    opacity: 1;
  }

  &.active {
    .categoriesImage {
      background-color: $ambar_400;
    }
  }
}

@media (max-width: 731px) {
  .categoriesItem {
    width: 140px;
    height: 140px;

    .categoriesCard {
      opacity: 1;
    }

    .categoriesImage {
      width: 100px;
      height: 100px;
      border: 2px solid $ambar_400;
    }
  }
}

@media (max-width: 393px) {
  .categoriesItem {
    width: 106px;
    height: 106px;

    .categoriesImage {
      width: 76px;
      height: 76px;

      .categoriesIcon {
        padding: 5px;
      }
    }
  }
}
