@layer layouts {
  /*
   * Article header
   */
  
  .article-header {
    flex-grow: 0;
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 45rem;
    flex-basis: 100%;
    max-width: 100%;
  
    @media (max-width: 991.98px) {
      padding-top: 2rem;
    }
  
    @media (max-width: 639.98px) {
      padding-top: 1.5rem;
    }
  }
  
  .article-toolbar-container {
    padding-bottom: 1rem;
    background-color: white;
    position: sticky;
    top: 0;
    flex-basis: 100%;
    max-width: 45rem;
    margin: 0 auto;
  
    @media (max-width: 991.98px) {
      padding-bottom: 1rem;
    }
  
    @media (max-width: 639.98px) {
      padding-bottom: 0.5rem;
    }
  
    .article-toolbar {
      padding-left: 1rem;
      margin-top: 1rem;
  
      .audio-player {
        flex: 1 1 auto;
        height: 2.5rem;
        padding: 0.175rem;
        margin-right: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
  
        button {
          padding: 0;
          border: 0;
          background: transparent;
          cursor: pointer;
          margin: 0;
          font-size: 1.4rem;
          outline: none;
        }
  
        #audio-player-container {
          --seek-before-width: 0%;
          --volume-before-width: 100%;
          --buffered-width: 0%;
          position: relative;
          margin: 100px 2.5% auto 2.5%;
          width: 95%;
          max-width: 500px;
          height: 132px;
          background: var(--color-white);
        }
  
        #audio-player-container::before {
          position: absolute;
          content: "";
          width: calc(100% + 4px);
          height: calc(100% + 4px);
          left: -2px;
          top: -2px;
          background: linear-gradient(to left, var(--color-teal), var(--color-orange));
          z-index: -1;
        }
  
        p {
          position: absolute;
          top: -18px;
          right: 5%;
          padding: 0 5px;
          margin: 0;
          font-size: 28px;
          background: var(--color-white);
        }
  
        path {
          stroke: var(--color-teal);
        }
  
        .time {
          display: inline-block;
          width: 37px;
          text-align: center;
          font-size: 15px;
        }
  
        output {
          display: inline-block;
          width: 32px;
          text-align: center;
          font-size: 20px;
          margin: 10px 2.5% 0 5%;
          clear: left;
        }
  
        #volume-slider {
          margin: 10px 2.5%;
          width: 58%;
        }
  
        #volume-slider::-webkit-slider-runnable-track {
          background: rgb(var(--rgb-teal) / 0.6);
        }
  
        #volume-slider::-moz-range-track {
          background: rgb(var(--rgb-teal) / 0.6);
        }
  
        #volume-slider::-ms-fill-upper {
          background: rgb(var(--rgb-teal) / 0.6);
        }
  
        #volume-slider::before {
          width: var(--volume-before-width);
        }
  
        #mute-icon {
          margin: 0 2.5%;
        }
  
        input[type="range"] {
          flex: 1;
          position: relative;
          appearance: none;
          -webkit-appearance: none;
          margin: 0;
          padding: 0;
          margin-right: 0.5rem;
          height: 5px;
          margin-left: 0.5rem;
          background-color: rgb(var(--rgb-grey-200) / 0.66);
          outline: none;
        }
  
        input[type="range"]::-webkit-slider-runnable-track {
          width: 100%;
          height: 3px;
          cursor: pointer;
          background: linear-gradient(
            to right,
            rgb(var(--rgb-teal) / 0.6) var(--buffered-width),
            rgb(var(--rgb-teal) / 0.2) var(--buffered-width)
          );
        }
  
        input[type="range"]::before {
          position: absolute;
          content: "";
          top: 0.5px;
          left: 0;
          width: var(--seek-before-width);
          height: 3px;
          background-color: var(--color-teal);
          cursor: pointer;
        }
  
        input[type="range"]::-webkit-slider-thumb {
          position: relative;
          appearance: none;
          -webkit-appearance: none;
          box-sizing: content-box;
          border: 1px solid var(--color-text-medium);
          height: 12px;
          width: 12px;
          border-radius: 50%;
          background-color: var(--color-white);
          cursor: pointer;
          margin: -6px 0 0 0;
        }
  
        input[type="range"]:active::-webkit-slider-thumb {
          transform: scale(1.2);
          background: var(--color-teal);
        }
  
        input[type="range"]::-moz-range-track {
          width: 100%;
          height: 3px;
          cursor: pointer;
          background: linear-gradient(
            to right,
            rgb(var(--rgb-teal) / 0.6) var(--buffered-width),
            rgb(var(--rgb-teal) / 0.2) var(--buffered-width)
          );
        }
  
        input[type="range"]::-moz-range-progress {
          background-color: var(--color-teal);
        }
  
        input[type="range"]::-moz-focus-outer {
          border: 0;
        }
  
        input[type="range"]::-moz-range-thumb {
          box-sizing: content-box;
          border: 1px solid var(--color-teal);
          height: 15px;
          width: 15px;
          border-radius: 50%;
          background-color: var(--color-white);
          cursor: pointer;
        }
  
        input[type="range"]:active::-moz-range-thumb {
          transform: scale(1.2);
          background: var(--color-teal);
        }
  
        input[type="range"]::-ms-track {
          width: 100%;
          height: 3px;
          cursor: pointer;
          background: transparent;
          border: solid transparent;
          color: transparent;
        }
  
        input[type="range"]::-ms-fill-lower {
          background-color: var(--color-teal);
        }
  
        input[type="range"]::-ms-fill-upper {
          background: linear-gradient(
            to right,
            rgb(var(--rgb-teal) / 0.6) var(--buffered-width),
            rgb(var(--rgb-teal) / 0.2) var(--buffered-width)
          );
        }
  
        input[type="range"]::-ms-thumb {
          box-sizing: content-box;
          border: 1px solid var(--color-teal);
          height: 15px;
          width: 15px;
          border-radius: 50%;
          background-color: var(--color-white);
          cursor: pointer;
        }
  
        input[type="range"]:active::-ms-thumb {
          transform: scale(1.2);
          background: var(--color-teal);
        }
      }
    }
  }
  
  .audio-icon {
    opacity: 0.7;
  
    &:hover {
      opacity: 1;
    }
  }
}