@layer components {
.tabbed_container {
  > input[type="radio"] { 
    display: none;
  }
  
  ul.tabs {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: var(--border-width) solid var(--border);
    flex-direction: row;
    li {
      margin-right: 10px;
    }
    
    label {
      display: inline-block;
      padding: 10px 15px;
      cursor: pointer;
      border: 1px solid transparent;
      border-radius: var(--radius) var(--radius) 0 0;
      
      &:hover {
        background: var(--surface-sunken);
      }
    }
  }
  
  .tab-pane {
    display: none;
    padding: 20px 0;
  }
  
  #tab_pending_submission:checked ~ .tabs label[for="tab_pending_submission"],
  #tab_pending_review:checked ~ .tabs label[for="tab_pending_review"],
  #tab_completed:checked ~ .tabs label[for="tab_completed"] {
    border: var(--border-width) solid var(--border);
    border-bottom: 1px solid white;
    margin-bottom: -1px;
    background: white;
  }
  
  #tab_pending_submission:checked ~ .tab-content #pending_submission_content,
  #tab_pending_review:checked ~ .tab-content #pending_review_content,
  #tab_completed:checked ~ .tab-content #completed_content {
    display: block;
  }
  
  .new-task-link {
    margin-left: auto;
    padding: 10px 15px;
    text-decoration: none;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: var(--radius);
    
    &:hover {
      background: var(--accent-hover);
    }
  }
}}