panelset.scss

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */

.post-body {
    .panelset {
      @extend .mw-100, .relative, .pv3;
      --panel-tabs-border-bottom: currentColor;
      --panel-tab-foreground: currentColor;
      --panel-tab-background: unset;
      --panel-tab-active-foreground: currentColor;
      --panel-tab-active-background: unset;
      --panel-tab-hover-foreground: currentColor;
      --panel-tab-hover-background: unset;
      --panel-tab-active-border-color: currentColor;
      --panel-tab-hover-border-color: currentColor;
      --panel-tab-inactive-opacity: 0.5;
      --panel-tab-font-family: inherit;
    }
    
    .panelset * {
      box-sizing: border-box;
    }
    
    .panelset .panel-tabs {
      display: -webkit-box;
      display: flex;
      flex-wrap: wrap;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
              flex-direction: row;
      -webkit-box-pack: start;
              justify-content: start;
      -webkit-box-align: center;
              align-items: center;
      overflow-y: visible;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0 0 2px 0;
      box-shadow: inset 0 -1px 0px var(--panel-tabs-border-bottom);
    }
    
    .panelset .panel-tabs * {
      -webkit-transition: opacity 0.5s ease;
      transition: opacity 0.5s ease;
    }
    
    .panelset .panel-tabs .panel-tab {
      min-height: 50px;
      display: -webkit-box;
      display: flex;
      -webkit-box-pack: center;
              justify-content: center;
      -webkit-box-align: center;
              align-items: center;
      padding: 0.5em 1em;
      font-family: var(--panel-tab-font-family);
      opacity: var(--panel-tab-inactive-opacity);
      border-top: 1px solid transparent;
      border-bottom: 1px solid transparent;
      margin-bottom: -2px;
      color: var(--panel-tab-foreground);
      background-color: var(--panel-tab-background);
      list-style: none;
      z-index: 5;
    }
    
    .panelset .panel-tabs .panel-tab > a {
      color: currentColor;
      text-decoration: none;
      border: none;
    }
    
    .panelset .panel-tabs .panel-tab > a:focus {
      outline: none;
      text-decoration: none;
      border: none;
    }
    
    .panelset .panel-tabs .panel-tab > a:hover {
      text-decoration: none;
      border: none;
    }
    
    .panelset .panel-tabs .panel-tab:hover {
      border-bottom-color: var(--panel-tab-hover-border-color);
      color: var(--panel-tab-hover-foreground);
      background-color: var(--panel-tab-hover-background);
      opacity: 1;
      cursor: pointer;
      z-index: 10;
    }
    
    .panelset .panel-tabs .panel-tab:focus {
      outline: none;
      color: var(--panel-tab-hover-foreground);
      border-bottom-color: var(--panel-tab-hover-border-color);
      background-color: var(--panel-tab-hover-background);
    }
    
    .panelset .panel-tabs .panel-tab.panel-tab-active {
      border-top-color: var(--panel-tab-active-border-color);
      color: var(--panel-tab-active-foreground);
      background-color: var(--panel-tab-active-background);
      opacity: 1;
    }
    
    .panelset .panel {
      display: none;
    }
    
    .panelset .panel-active {
      display: block;
    }
}