@vtmn/css-accordion/dist/index-with-vars.css

Decathlon Design System - Vitamin specific CSS styles for accordion component

.vtmn-accordion{
  box-sizing:border-box;
  display:block;
  inline-size:100%;
  min-block-size:3rem;
  block-size:-moz-fit-content;
  block-size:fit-content;
  font-family:var(--vtmn-typo_font-family);
  font-size:var(--vtmn-typo_text-2-font-size);
  line-height:var(--vtmn-typo_text-2-line-height);
  color:var(--vtmn-semantic-color_content-primary);
  font-weight:var(--vtmn-typo_font-weight--normal);
  background-color:var(--vtmn-semantic-color_background-primary);
  -webkit-border-after:0.0625rem solid var(--vtmn-semantic-color_border-primary);
          border-block-end:0.0625rem solid var(--vtmn-semantic-color_border-primary);
  outline:0;
}

.vtmn-accordion--with-icon-left summary::before{
  content:'';
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.333 8a6.666 6.666 0 1 0 13.333 0A6.666 6.666 0 0 0 1.333 8Zm12 0A5.333 5.333 0 1 1 2.667 8a5.333 5.333 0 0 1 10.666 0ZM8.667 4.667V6H7.333V4.667h1.334Zm0 6.666v-4H7.333v4h1.334Z'/%3E%3C/svg%3E");
          mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.333 8a6.666 6.666 0 1 0 13.333 0A6.666 6.666 0 0 0 1.333 8Zm12 0A5.333 5.333 0 1 1 2.667 8a5.333 5.333 0 0 1 10.666 0ZM8.667 4.667V6H7.333V4.667h1.334Zm0 6.666v-4H7.333v4h1.334Z'/%3E%3C/svg%3E");
  -webkit-mask-size:cover;
          mask-size:cover;
  inline-size:1.5rem;
  block-size:1.5rem;
  position:relative;
  display:inline-block;
  -webkit-margin-end:0.75rem;
          margin-inline-end:0.75rem;
  background-color:var(--vtmn-semantic-color_content-primary);
}

.vtmn-accordion summary{
  display:flex;
  cursor:pointer;
  list-style:none;
  font-weight:var(--vtmn-typo_font-weight--bold);
  position:relative;
  padding-block:var(--vtmn-spacing_3);
  padding-inline:var(--vtmn-spacing_4);
  outline:0;
  transition:background-color 400ms ease;
}

.vtmn-accordion summary::-webkit-details-marker{
  display:none;
}

.vtmn-accordion:not([aria-disabled='true']) summary:hover{
  background-color:var(--vtmn-semantic-color_hover-primary);
}

.vtmn-accordion:not([aria-disabled='true']) summary:active{
  background-color:var(--vtmn-semantic-color_active-primary);
}

.vtmn-accordion:not([aria-disabled='true']) > summary:focus-visible{
  box-shadow:var(--vtmn-shadow_focus-visible);
}

.vtmn-accordion[aria-disabled='true']{
  cursor:not-allowed;
}

.vtmn-accordion[aria-disabled='true'] > *{
  opacity:var(--vtmn-opacity_disabled-state);
  pointer-events:none;
}

.vtmn-accordion summary > span[class^='vtmx-']{
  font-size:var(--vtmn-typo_title-4-font-size);
  -webkit-margin-end:var(--vtmn-spacing_3);
          margin-inline-end:var(--vtmn-spacing_3);
}

.vtmn-accordion summary::after{
  content:'';
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m8 8.781 3.3-3.3.943.943L8 10.667 3.757 6.424l.943-.943 3.3 3.3z'/%3E%3C/svg%3E");
          mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m8 8.781 3.3-3.3.943.943L8 10.667 3.757 6.424l.943-.943 3.3 3.3z'/%3E%3C/svg%3E");
  inline-size:1.5rem;
  block-size:1.5rem;
  position:absolute;
  inset-inline-end:0;
  -webkit-margin-end:var(--vtmn-spacing_3);
          margin-inline-end:var(--vtmn-spacing_3);
  background-color:var(--vtmn-semantic-color_content-primary);
  transition:transform 400ms ease;
}

.vtmn-accordion[open]{
  -webkit-border-after:0;
          border-block-end:0;
}

.vtmn-accordion[open] summary::after{
  transform:rotateZ(-180deg);
}

.vtmn-accordion_content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:var(--vtmn-spacing_4);
}

.vtmn-accordion_content > *{
  margin-block:var(--vtmn-spacing_1);
  margin-inline:0;
}

.vtmn-accordion_content:last-child{
  -webkit-border-after:0.0625rem solid var(--vtmn-semantic-color_border-primary);
          border-block-end:0.0625rem solid var(--vtmn-semantic-color_border-primary);
}

@media screen and (min-width: 600px) and (max-width: 899px){
}

@media screen and (min-width: 900px) and (max-width: 1199px){
}

@media screen and (min-width: 1200px) and (max-width: 1799px){
}

@media screen and (min-width: 1800px){
}