@import "https://www.wilmu.edu/_files/css/var-colors.css";
:root {
--border-radius10: 0.75em;
}

/** TABS **/
:is([aria-selected="true"]) {
  background-color: var(--color-hsl-white);
  border: 1px solid;
  border-color: var(--color-hsl-primary0) var(--color-hsl-primary0) var(--color-hsl-white);
  color: var(--color-primary4);
  font-weight: 600;  
  letter-spacing: -0.013rem; /* Helps with layout shift when text becomes bold */
}

[role="tabpanel"] {
  background-color: var(--color-hsl-white);
  padding: 1.5rem;
  border: 1px solid;
  border-color: var(--color-hsl-primary0);
  border-radius: var(--border-radius10);
}
[data-panel="default"] {
  border-top-left-radius: 0;
}

:is([aria-selected="false"]) {
  background-color: var(--color-hsl-gray1);
  border-color: transparent;
  font-weight: 400;
  text-decoration: underline;
}

:is([role="tab"]) {
  border-top-left-radius: var(--border-radius10);
  border-top-right-radius: var(--border-radius10);
  -webkit-margin-after: -3px;
  margin-block-end: -3px;
}

[role="tab"] {
  cursor: pointer;
  appearance: button;
  -webkit-appearance: button;
  display: block;
  padding: 1rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out;
}

[role="tabpanel"] ul {
  margin: 0;
  padding: 0 1rem;
}
[role="tabpanel"] li {
  list-style: none;
  -webkit-padding-start: 0.15rem;
  padding-inline-start: 0.15rem;
}

[role="tabpanel"] li::marker {
  content: "✓";
  color: var(--color-hsl-primary0);
}

.tabs {
  position: relative;
  padding: 1.25rem;
  border: 1px solid transparent;
}

[role="tablist"] {
  padding: 0.2rem 0;
  display: flex;
  flex-wrap: wrap;
  margin-block-end: 0;
  -webkit-margin-after: 0;
}

@media (width <= 62.0625em) { 
  [role="tablist"] { 
    flex-direction: column; 
  } 

  [role="tab"] { 
    border-radius: var(--border-radius10); 
    border: 1px solid; 
    border-color: var(--color-primary0);
    margin-block-end: 1em;
    -webkit-margin-after: 1em; 
  } 
  
  [role="tab"][aria-selected="false"] { 
    border-radius: var(--border-radius10); 
    border: 1px solid; 
    border-color: transparent; 
  } 
  [role="tabpanel"] { 
    border-radius: var(--border-radius10); 
  } 
} 

@media (pointer: fine) { 
  [role="tab"]:hover { 
    color: var(--color-hsl-primary4); 
    text-decoration: underline; 
    text-decoration-style: dashed; 
    text-decoration-thickness: 0.125em; 
    text-underline-offset: 1.5px; 
  } 
} 
@media (pointer: course) { 
  :is([role="tab"]) { 
    height: 50px; 
  } 
}