/* showhides.st.css */
@namespace "ShowHides";

/* = Project info and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    tablet,
    --color-faint,
    --spacing-unit;
}

/* = Import Root Component CSS API */
:import {
  -st-from: "../../components/ShowHides/showhides.st.css";
  -st-default: ShowHides;
}

:import {
  -st-from: "../../mixins/boxShadow.st.css";
  -st-default: BoxShadow;
}

:import {
  -st-from: "../../components/ShowHide/showhide.st.css";
  -st-default: ShowHide;
}

@st-scope Base {
  ShowHides {
    --showhide-border-radius: 0 0 48px 0;
    margin-top: calc(3 * var(--spacing-unit));
    margin-bottom: calc(5 * var(--spacing-unit));
  }

  ShowHides::title,
  ShowHides::description {
    margin-bottom: 21px;
  }

  ShowHides::content > * {
    -st-mixin: BoxShadow;
    border-radius: var(--showhide-border-radius);
  }

  ShowHides::content > ul {
    list-style-type: none;
    padding: 0;
  }

  ShowHides::content > ul > li:last-child ShowHide,
  ShowHides::content > ul > li:last-child ShowHide::content {
    border-radius: var(--showhide-border-radius);
  }

  ShowHides::content {
    border: 16px solid var(--color-faint);
    border-radius: 0 0 65px 0;
  }
}

@media value(tablet) {
  @st-scope Base {
    ShowHides::content {
      /* Move onto wider grid lines than body content. */
      grid-column: 3 / 13;
    }

    ShowHides::content {
      border-width: 20px;
    }
  }
}

@st-scope [dir=rtl] Base {
  ShowHides {
    --showhide-border-radius: 0 0 0 48px;
  }

  ShowHides::content {
    border-radius: 0 0 0 65px;
  }
}