.bh-provider-status-card { border-top: 4px solid $color-core-blue; background-color: $color-white; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.13); border-radius: 4px; padding: 0; width: 270px; max-width: 100%; @media screen and (max-width: 768px) { //temp width: 100%; } &-provider-info { padding: 20px 24px 23px; display: flex; align-items: center; } &-provider-image { width: 56px; height: 56px; flex-basis: 56px; border-radius: 50%; object-fit: cover; } &-provider-initials { width: 56px; height: 56px; flex-basis: 56px; display: flex; justify-content: center; align-items: center; font-family: $effra; font-size: 22px; line-height: 27px; border-radius: 50%; background-color: $color-core-blue-10-light; color: $color-core-blue; } &-provider-right-side { padding: 0 8px; } &-provider-name { font-family: $effra; font-weight: bold; font-size: 15px; line-height: 18px; letter-spacing: 0.25px; color: $color-banner-black; } &-accordion { border-top: 1px solid $color-banner-black-08-light; > summary { list-style: none; ::-webkit-details-marker { display: none; } } .bh-provider-status-card-trigger-expand { g { transform: rotate(180deg); transform-origin: 50% 50%; transition: transform 250ms linear; } } &[open] { .bh-provider-status-card-trigger-expand { g { transform: rotate(0deg); transform-origin: 50% 50%; transition: transform 250ms linear; } } } } &-accordion-trigger { padding: 11.5px 16px 11.5px 24px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; &:hover { .bh-provider-status-card-trigger-text { color: $color-banner-black; } } &:focus { outline-width: 2px; outline-style: solid; outline-color: $color-accent-blue-03-light; outline-offset: -2px; } } &-trigger-text { font-family: $effra; font-weight: bold; font-size: 17px; line-height: 20px; letter-spacing: 0.15px; color: $color-banner-black-03-light; } &-list-group { border-top: 1px solid $color-banner-black-08-light; padding: 0 24px; } &-list { list-style: none; padding-left: 0; margin-bottom: 0; } &-list-item { border-bottom: 1px solid $color-banner-black-08-light; padding: 16px 0 15px; font-family: $effra; font-size: 17px; line-height: 20px; letter-spacing: 0.49px; color: $color-banner-black; display: flex; justify-content: space-between; &:last-child { border-bottom: 0; } } &-list-number { background-color: transparent; border: 0; font-family: $effra; font-weight: bold; font-size: 17px; line-height: 20px; letter-spacing: 0.49px; color: $color-accent-blue; padding: 0; &:hover { color: $color-accent-blue-01-dark; } } &-list-number-button { &:focus { outline-width: 2px; outline-style: solid; outline-color: $color-accent-blue-03-light; outline-offset: 2px; } &:hover, &:active { color: $color-accent-blue-01-dark; text-decoration: underline; outline-color: transparent; } } }