$font-family-polyfill: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
$font-family-sans-serif: 'Open Sans', $font-family-polyfill;
$font-family-headings: 'Nunito', $font-family-sans-serif;
$blue: #007bc7;
$info: $blue;
$grisulado-10: #f3f6f9;
$grisulado-50: #e6ebf0;
$grisulado-900: #38485c;
$card-border-radius: 0.5rem;
$card-border-width: 0;
$card-shadow-color: $grisulado-10;
$card-shadow-collapsable-color: $grisulado-50;
$card-box-shadow: 0 0 0 2px $card-shadow-color;
$card-box-shadow-collapsable: 0 0 0 2px $card-shadow-collapsable-color;
$white: white;
$accordion-margin: 0.75rem;
$accordion-card-header-padding: 0.75rem 3.75rem 0.75rem 1.5rem;
$card-header-bg: $grisulado-10;

$accordion-icon-collapsed: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMkQ0MDUwIiBkPSJNMTkgMTFMMTMgMTEgMTMgNSAxMSA1IDExIDExIDUgMTEgNSAxMyAxMSAxMyAxMSAxOSAxMyAxOSAxMyAxMyAxOSAxM3oiLz48L3N2Zz4=');
$accordion-icon-expanded: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMkQ0MDUwIiBkPSJNNSAxMUgxOVYxM0g1eiIvPjwvc3ZnPg==');

$accordion-icon-collapsed-white: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style="fill: rgba(255, 255, 255, 1);transform: ;msFilter:;"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"></path></svg>');
$accordion-icon-expanded-white: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style="fill: rgba(255, 255, 255, 1);transform: ;msFilter:;"><path d="M5 11h14v2H5z"></path></svg>');

$accordion-icon-collapsed-blue: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style="fill: rgba(0, 123, 199);transform: ;msFilter:;"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"></path></svg>');
$accordion-icon-expanded-blue: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style="fill: rgba(0, 123, 199);transform: ;msFilter:;"><path d="M5 11h14v2H5z"></path></svg>');

$accordion-icon-user: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style="fill: rgba(56, 72, 92);transform: ;msFilter:;"><path d="M12 2C6.579 2 2 6.579 2 12s4.579 10 10 10 10-4.579 10-10S17.421 2 12 2zm0 5c1.727 0 3 1.272 3 3s-1.273 3-3 3c-1.726 0-3-1.272-3-3s1.274-3 3-3zm-5.106 9.772c.897-1.32 2.393-2.2 4.106-2.2h2c1.714 0 3.209.88 4.106 2.2C15.828 18.14 14.015 19 12 19s-3.828-.86-5.106-2.228z"></path></svg>');
$accordion-icon-user-white: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style="fill: rgba(255, 255, 255, 1);transform: ;msFilter:;"><path d="M12 2C6.579 2 2 6.579 2 12s4.579 10 10 10 10-4.579 10-10S17.421 2 12 2zm0 5c1.727 0 3 1.272 3 3s-1.273 3-3 3c-1.726 0-3-1.272-3-3s1.274-3 3-3zm-5.106 9.772c.897-1.32 2.393-2.2 4.106-2.2h2c1.714 0 3.209.88 4.106 2.2C15.828 18.14 14.015 19 12 19s-3.828-.86-5.106-2.228z"></path></svg>');
$accordion-icon-user-blue: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style="fill: rgba(0, 123, 199);transform: ;msFilter:;"><path d="M12 2C6.579 2 2 6.579 2 12s4.579 10 10 10 10-4.579 10-10S17.421 2 12 2zm0 5c1.727 0 3 1.272 3 3s-1.273 3-3 3c-1.726 0-3-1.272-3-3s1.274-3 3-3zm-5.106 9.772c.897-1.32 2.393-2.2 4.106-2.2h2c1.714 0 3.209.88 4.106 2.2C15.828 18.14 14.015 19 12 19s-3.828-.86-5.106-2.228z"></path></svg>');

$accordion-bg-white: $white;

@mixin accordion-icon($accordion-icon) {
  background: transparent #{$accordion-icon} no-repeat center center;
}

::ng-deep .accordion {
  > .card {
    margin-bottom: $accordion-margin;
    box-shadow: $card-box-shadow-collapsable;
    overflow: visible;

    /* &:not(:last-of-type) {
      @include border-bottom-radius($card-border-radius);
    }

    &:not(:first-of-type) {
      @include border-top-radius($card-border-radius);
    } */

    .card-header {
      width: 100%;
      font-family: $font-family-headings;
      background-color: $blue;
      border-width: 0;
      text-align: left;
      padding: $accordion-card-header-padding;
      transition: background-color 0.2s;
      border-radius: 0.5rem 0.5rem 0 0;
      position: relative;
      z-index: 1;
      color: $white;
      min-height: 48px;
      display: grid;
      grid-template-areas:
        'icon label'
        'icon title'
        'icon subtitle';
      grid-template-columns: auto 1fr;
      grid-column-gap: 0;
      grid-row-gap: 0;
      align-items: center;
      word-break: break-word;
      font-size: 1.25rem;
      line-height: 1.5rem;
      font-weight: 700;

      &:after {
        content: '';
        height: 1.75rem;
        width: 1.75rem;
        min-width: 1.75rem;
        position: absolute;
        right: 24px;
        top: 50%;
        transform: translateY(-50%);
      }

      i,
      .material-symbols-rounded o-icon,
      o-collapse-icon {
        display: inline-block;
        font-size: 1.75rem;
        width: 1.75rem;
        min-width: 1.75rem;
        height: 1.75rem;
        grid-area: icon;
        margin-right: 0.75rem;
      }

      // FIXME: REMOVER COLLPASE MAL TIPEADO MAS ADELANTE
      .collapse-label,
      .collpase-title,
      o-collapse-label {
        grid-area: label;
        margin-bottom: 0.25rem;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        font-family: $font-family-sans-serif;
        word-break: break-word;
      }

      // FIXME: REMOVER COLLPASE MAL TIPEADO MAS ADELANTE
      .collapse-title,
      .collpase-subtitle,
      o-collapse-title {
        grid-area: title;
        font-size: 1.25rem;
        line-height: 1.5rem;
        font-weight: 700;
        margin-bottom: 0;
        word-break: break-word;
      }

      .collapse-subtitle,
      o-collapse-subtitle {
        grid-area: subtitle;
        margin-top: 0.25rem;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        font-family: $font-family-sans-serif;
        word-break: break-word;
      }

      &:after {
        margin-left: auto;
        @include accordion-icon($accordion-icon-expanded-blue);
      }

      &:focus,
      &.focus {
        outline: none;
        box-shadow: 0 0 0 4px #005386;
        border-radius: 0.25rem;
      }

      &:after {
        float: right;
        @include accordion-icon($accordion-icon-expanded-white);
      }

      &.collapsed {
        border-radius: 0.5rem;
        background-color: $card-header-bg;
        color: $grisulado-900;
        position: relative;
        backface-visibility: hidden;

        &:hover,
        &.hover {
          background-color: $grisulado-10;
          color: $blue;
          box-shadow: 0 0 0 2px #007bc7;
          backface-visibility: visible;

          + * > .card-body {
            border-color: $card-header-bg;
          }

          &:after {
            display: inline-block;
            vertical-align: middle;
            @include accordion-icon($accordion-icon-collapsed-blue);
          }
        }

        &:after {
          display: inline-block;
          vertical-align: middle;
          @include accordion-icon($accordion-icon-collapsed);
        }
      }

      // FIXME: REMOVER .card-info MAS ADELANTE
      &.card-info {
        > br {
          display: none;
        }
      }
    }

    .card-body {
      padding: 1rem 1.5rem;
      border: none;
      /* @include border-bottom-radius($card-border-radius); */

      span:not(.material-symbols-rounded o-icon) {
        font-size: 1.125rem;
        font-weight: 600;
        font-family: $font-family-headings;
        line-height: 1.5rem;
        display: block;
        margin-bottom: 0;
      }

      p:last-of-type {
        margin-bottom: 0;
      }

      hr {
        margin-top: 1rem;
        margin-bottom: 1rem;
      }

      > label.card-details {
        cursor: pointer;
        margin-bottom: 0;
      }

      .card-details {
        display: flex;
        align-items: center;
        gap: 0.75rem;

        .card-details-content {
          display: grid;
          grid-column-gap: 1rem;
          width: 95%;

          @media screen and (max-width: 592px) {
            width: 70%;
          }

          > h5 {
            margin-bottom: 0;
            font-size: 1.125rem;
            font-weight: 600;
            font-family: $font-family-headings;
            line-height: 1.5rem;
          }
        }

        i,
        .material-symbols-rounded o-icon {
          margin: auto 0;
          font-size: 1.5rem;
        }

        .form-radio {
          cursor: pointer;
          margin-left: auto;
          width: 1.25rem;
          min-width: 1.25rem;
          height: 1.25rem;
          appearance: none;
          background-color: $white;
          font: inherit;
          color: currentColor;
          border: 2px solid currentColor;
          border-radius: 50%;
          transform: translateY(-0.075rem);
          display: grid;
          place-content: center;

          &:checked {
            border-color: $info;

            &:before {
              transform: scale(1);
            }
          }

          &:before {
            content: '';
            width: 0.65rem;
            height: 0.65rem;
            border-radius: 50%;
            transform: scale(0);
            transition: 120ms transform ease-in-out;
            box-shadow: inset 1rem 1rem $info;
          }

          &:focus,
          &:focus-visible {
            background-color: $info;
            box-shadow: 0 0 0 7px #005386, inset 0 0 0 3.4px $white;
            outline: 3px solid $white;
            outline-offset: 0px;
            border-color: $info;
          }

          &:hover {
            border-color: $info;
          }
        }
      }
    }
  }

  &.accordion-white {
    > .card {
      border-radius: $card-border-radius;

      .card-header {
        &.collapsed {
          background: $accordion-bg-white;
        }
      }
    }
  }
}