[data-service-button] {
  display: flex;
  align-items: center;
  gap: 0;
  background-color: #ffffff;
  color: #1c1c1c;
  transition: all 0.3s ease;
  padding: 12px 20px;
  width: 100%;

  &:not(.active):hover {
    scale: 102%;
  }

  span {
    flex: 1;
    text-align: center;
    transition: transform 0.3s ease;
  }

  img {
    flex-shrink: 0;
    width: 0;
    opacity: 0;
    transition:
      width 0.3s ease,
      opacity 0.3s ease;
    overflow: hidden;
  }

  &.active {
    background-color: #cd0c11;
    color: #ffffff;

    span {
      transform: translateX(-10px);
    }

    img {
      width: 20px;
      opacity: 1;
    }
  }
}

[services-category] {
  transition: all 0.3s ease;
  opacity: 1;
  max-height: 2000px;
  overflow: hidden;
}
[services-category].hidden {
  opacity: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
}
details[data-category-index] {
  summary {
    background-color: #ffffff;
    color: #1c1c1c;
    transition:
      background 0.3s ease,
      color 0.3s ease;
    cursor: pointer;

    svg {
      transition: transform 0.3s ease;
    }
  }

  &.active summary {
    background-color: #cd0c11;
    color: #ffffff;

    svg {
      transform: rotate(180deg);
    }
  }

  > div {
    overflow: hidden;
    max-height: 0;
    padding: 0 0;
    transition:
      max-height 0.4s ease,
      padding 0.3s ease;
  }

  &[open] > div,
  &.active > div {
    max-height: 2000px;
    padding: 8px 0 0 0;
  }

  summary::marker,
  summary::-webkit-details-marker {
    display: none;
    content: "";
  }
}