@use "@infineon/design-system-tokens/dist/tokens";

.accordion-item {
  margin: 8px 0;
  border: none;

  &:first-of-type {
    margin-top: 0;

    & .accordion-button {
      border-top-left-radius: 0;
      border-top-right-radius: 0;    
    }
  }

  &:last-of-type {
    margin-bottom: 0;

    & .accordion-button.collapsed {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;    
    }
  }
}

.accordion-button {
  border: 1px solid tokens.$color-gray-200;
  color: tokens.$color-default-500;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  padding: 14px 24px 14px 52px;

  &:hover {
    background-color: tokens.$color-gray-200;
  }

  &::before {
    content: "";
    position: absolute;
    left: 16px;
    width: 24px;
    height: 24px;
    background-size: 16.5px;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.2s ease-in-out;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23378375' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
  }

  &:after {
    display: none;
  }

  &:focus {
    border-color: tokens.$color-gray-200;
    box-shadow: none;  
  }

  &:not(.collapsed) {
    border: 1px solid transparent;
    color: tokens.$color-text-white;
    background-color: tokens.$color-default-500;
    box-shadow: none;
  
    &::before {
      transform: rotate(-180deg);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFF' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
    }
  }
}

.accordion-body {
  padding: 16px 24px 16px 52px;
  font-size: tokens.$font-size-s;
}