/* Top-level accordion identity icons */

.settings-summary-copy strong.otl-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* The approved SVGs are embedded as masks so they are available on first paint while CSS controls their color. */
.otl-section-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-color: #8291a6;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition:
    background-color 160ms ease,
    filter 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

/* Get Started */
[data-section-header-icon="get-started"] .otl-section-icon {
  width: 17px;
  height: 17px;
  background-color: #38bdf8;
  -webkit-mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiPgogIDxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTggNS43NWExIDEgMCAwIDEgMS41My0uODQ3bDkgNi4yNWExIDEgMCAwIDEgMCAxLjY5NGwtOSA2LjI1QTEgMSAwIDAgMSA4IDE4LjI1VjUuNzVaIi8+Cjwvc3ZnPgo=");
  mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiPgogIDxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTggNS43NWExIDEgMCAwIDEgMS41My0uODQ3bDkgNi4yNWExIDEgMCAwIDEgMCAxLjY5NGwtOSA2LjI1QTEgMSAwIDAgMSA4IDE4LjI1VjUuNzVaIi8+Cjwvc3ZnPgo=");
  filter:
    drop-shadow(0 0 5px rgba(56, 189, 248, 0.48));
}

/* Prebuilt Trainings */
[data-section-header-icon="premade-trainings"] .otl-section-icon {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: #8291a6;
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20aria-hidden%3D%22true%22%3E%0A%20%20%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%226.5%22%20height%3D%226.5%22%20rx%3D%221.4%22%20fill%3D%22black%22%2F%3E%0A%20%20%3Crect%20x%3D%2213.5%22%20y%3D%224%22%20width%3D%226.5%22%20height%3D%226.5%22%20rx%3D%221.4%22%20fill%3D%22black%22%2F%3E%0A%20%20%3Crect%20x%3D%224%22%20y%3D%2213.5%22%20width%3D%226.5%22%20height%3D%226.5%22%20rx%3D%221.4%22%20fill%3D%22black%22%2F%3E%0A%20%20%3Crect%20x%3D%2213.5%22%20y%3D%2213.5%22%20width%3D%226.5%22%20height%3D%226.5%22%20rx%3D%221.4%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20aria-hidden%3D%22true%22%3E%0A%20%20%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%226.5%22%20height%3D%226.5%22%20rx%3D%221.4%22%20fill%3D%22black%22%2F%3E%0A%20%20%3Crect%20x%3D%2213.5%22%20y%3D%224%22%20width%3D%226.5%22%20height%3D%226.5%22%20rx%3D%221.4%22%20fill%3D%22black%22%2F%3E%0A%20%20%3Crect%20x%3D%224%22%20y%3D%2213.5%22%20width%3D%226.5%22%20height%3D%226.5%22%20rx%3D%221.4%22%20fill%3D%22black%22%2F%3E%0A%20%20%3Crect%20x%3D%2213.5%22%20y%3D%2213.5%22%20width%3D%226.5%22%20height%3D%226.5%22%20rx%3D%221.4%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/*
  Replace the old CSS-drawn Get Started triangle now that the real SVG
  icon is being used.
*/
.quick-start-summary
.settings-summary-copy > strong::before {
  content: none !important;
  display: none !important;
}

/* Settings */
[data-section-header-icon="settings"] .otl-section-icon {
  -webkit-mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiPgogIDxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxwYXRoIGQ9Ik00IDZoNU0xMyA2aDciLz4KICAgIDxjaXJjbGUgY3g9IjExIiBjeT0iNiIgcj0iMiIvPgogICAgPHBhdGggZD0iTTQgMTJoOU0xNyAxMmgzIi8+CiAgICA8Y2lyY2xlIGN4PSIxNSIgY3k9IjEyIiByPSIyIi8+CiAgICA8cGF0aCBkPSJNNCAxOGgzTTExIDE4aDkiLz4KICAgIDxjaXJjbGUgY3g9IjkiIGN5PSIxOCIgcj0iMiIvPgogIDwvZz4KPC9zdmc+Cg==");
  mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiPgogIDxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxwYXRoIGQ9Ik00IDZoNU0xMyA2aDciLz4KICAgIDxjaXJjbGUgY3g9IjExIiBjeT0iNiIgcj0iMiIvPgogICAgPHBhdGggZD0iTTQgMTJoOU0xNyAxMmgzIi8+CiAgICA8Y2lyY2xlIGN4PSIxNSIgY3k9IjEyIiByPSIyIi8+CiAgICA8cGF0aCBkPSJNNCAxOGgzTTExIDE4aDkiLz4KICAgIDxjaXJjbGUgY3g9IjkiIGN5PSIxOCIgcj0iMiIvPgogIDwvZz4KPC9zdmc+Cg==");
}

/* Events */
[data-section-header-icon="events"] .otl-section-icon {
  width: 17px;
  height: 17px;
  -webkit-mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiPgogIDxwYXRoCiAgICBmaWxsPSJjdXJyZW50Q29sb3IiCiAgICBkPSJNMTMuMiAyLjkgNS43IDEzaDUuMWwtMSA4LjEgOC41LTExLjRoLTUuMmwuMS02LjhaIgogIC8+Cjwvc3ZnPgo=");
  mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiPgogIDxwYXRoCiAgICBmaWxsPSJjdXJyZW50Q29sb3IiCiAgICBkPSJNMTMuMiAyLjkgNS43IDEzaDUuMWwtMSA4LjEgOC41LTExLjRoLTUuMmwuMS02LjhaIgogIC8+Cjwvc3ZnPgo=");
}

/* Trainers */
[data-section-header-icon="trainers"] .otl-section-icon {
  -webkit-mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiPgogIDxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxjaXJjbGUgY3g9IjguMjUiIGN5PSI4IiByPSIzIi8+CiAgICA8cGF0aCBkPSJNMy43NSAxOC41Yy41NS0zLjI1IDIuMjUtNC45IDQuNS00LjlzMy45NSAxLjY1IDQuNSA0LjkiLz4KICAgIDxwYXRoIGQ9Ik0xNS4xIDguNGMxLjI1IDEuMTUgMS4yNSAyLjk1IDAgNC4xIi8+CiAgICA8cGF0aCBkPSJNMTggNi4yYzIuNiAyLjQgMi42IDYuMiAwIDguNiIvPgogIDwvZz4KPC9zdmc+Cg==");
  mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiPgogIDxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxjaXJjbGUgY3g9IjguMjUiIGN5PSI4IiByPSIzIi8+CiAgICA8cGF0aCBkPSJNMy43NSAxOC41Yy41NS0zLjI1IDIuMjUtNC45IDQuNS00LjlzMy45NSAxLjY1IDQuNSA0LjkiLz4KICAgIDxwYXRoIGQ9Ik0xNS4xIDguNGMxLjI1IDEuMTUgMS4yNSAyLjk1IDAgNC4xIi8+CiAgICA8cGF0aCBkPSJNMTggNi4yYzIuNiAyLjQgMi42IDYuMiAwIDguNiIvPgogIDwvZz4KPC9zdmc+Cg==");
}

/* Saved Trainings */
[data-section-header-icon="saved-trainings"] .otl-section-icon {
  align-self: center;
  transform: translateY(0) !important;
  -webkit-mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiPgogIDxwYXRoIGZpbGw9Im5vbmUiCiAgICAgICAgc3Ryb2tlPSJjdXJyZW50Q29sb3IiCiAgICAgICAgc3Ryb2tlLXdpZHRoPSIxLjgiCiAgICAgICAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogICAgICAgIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgICAgICAgZD0iTTcgNC41aDEwQTEuNSAxLjUgMCAwIDEgMTguNSA2djEzLjFhLjc1Ljc1IDAgMCAxLTEuMTYuNjNMMTIgMTYuMjVsLTUuMzQgMy40OGEuNzUuNzUgMCAwIDEtMS4xNi0uNjNWNkExLjUgMS41IDAgMCAxIDcgNC41WiIvPgo8L3N2Zz4K");
  mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiPgogIDxwYXRoIGZpbGw9Im5vbmUiCiAgICAgICAgc3Ryb2tlPSJjdXJyZW50Q29sb3IiCiAgICAgICAgc3Ryb2tlLXdpZHRoPSIxLjgiCiAgICAgICAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogICAgICAgIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgICAgICAgZD0iTTcgNC41aDEwQTEuNSAxLjUgMCAwIDEgMTguNSA2djEzLjFhLjc1Ljc1IDAgMCAxLTEuMTYuNjNMMTIgMTYuMjVsLTUuMzQgMy40OGEuNzUuNzUgMCAwIDEtMS4xNi0uNjNWNkExLjUgMS41IDAgMCAxIDcgNC41WiIvPgo8L3N2Zz4K");
}

details[open][data-section-header-icon="saved-trainings"]
> summary .otl-section-icon {
  transform: translateY(0) !important;
}

/* Premium */
[data-section-header-icon="premium"] .otl-section-icon {
  width: 18px;
  height: 18px;
  background-color: #a78bfa;
  -webkit-mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiPgogIDxwYXRoCiAgICBmaWxsPSJjdXJyZW50Q29sb3IiCiAgICBkPSJtMTIgMi45IDIuNjUgNS4zNyA1LjkzLjg2LTQuMjkgNC4xOCAxLjAxIDUuOUwxMiAxNi40MiA2LjcgMTkuMmwxLjAxLTUuOS00LjI5LTQuMTggNS45My0uODZMMTIgMi45WiIKICAvPgo8L3N2Zz4K");
  mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiPgogIDxwYXRoCiAgICBmaWxsPSJjdXJyZW50Q29sb3IiCiAgICBkPSJtMTIgMi45IDIuNjUgNS4zNyA1LjkzLjg2LTQuMjkgNC4xOCAxLjAxIDUuOUwxMiAxNi40MiA2LjcgMTkuMmwxLjAxLTUuOS00LjI5LTQuMTggNS45My0uODZMMTIgMi45WiIKICAvPgo8L3N2Zz4K");
  filter:
    drop-shadow(0 0 5px rgba(167, 139, 250, 0.42));
}


/* Neutral sections brighten subtly on interaction. */
@media (hover: hover) {
  details[data-section-header-icon="settings"]:hover
  > summary .otl-section-icon,

  details[data-section-header-icon="events"]:hover
  > summary .otl-section-icon,

  details[data-section-header-icon="trainers"]:hover
  > summary .otl-section-icon,

  details[data-section-header-icon="premade-trainings"]:hover
  > summary .otl-section-icon,

  details[data-section-header-icon="saved-trainings"]:hover
  > summary .otl-section-icon {
    background-color: #b8c5d5;
  }

  details[data-section-header-icon="get-started"]:hover
  > summary .otl-section-icon {
    background-color: #7dd3fc;
    filter:
      drop-shadow(0 0 7px rgba(56, 189, 248, 0.56));
  }

  details[data-section-header-icon="premium"]:hover
  > summary .otl-section-icon {
    background-color: #c4b5fd;
    filter:
      drop-shadow(0 0 7px rgba(167, 139, 250, 0.48));
  }
}


/* Open accordion = slightly clearer identifier. */
details[open][data-section-header-icon="settings"]
> summary .otl-section-icon,

details[open][data-section-header-icon="events"]
> summary .otl-section-icon,

details[open][data-section-header-icon="trainers"]
> summary .otl-section-icon,

details[open][data-section-header-icon="premade-trainings"]
> summary .otl-section-icon,

details[open][data-section-header-icon="saved-trainings"]
> summary .otl-section-icon {
  background-color: #cbd5e1;
}

details[open][data-section-header-icon="get-started"]
> summary .otl-section-icon {
  background-color: #7dd3fc;
}

details[open][data-section-header-icon="premium"]
> summary .otl-section-icon {
  background-color: #c4b5fd;
}


/* Keep the icon hierarchy restrained on small screens too. */
@media (max-width: 620px) {
  .otl-section-icon {
    width: 17px;
    height: 17px;
  }

  [data-section-header-icon="premium"]
  .otl-section-icon {
    width: 18px;
    height: 18px;
  }
}


@media (prefers-reduced-motion: reduce) {
  .otl-section-icon {
    transition: none !important;
  }
}