/* showhide.st.css */
@namespace "ShowHide";

/* = Project info and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    tablet,
    --spacing-unit,
    --color-heading,
    --color-accent-4,
    --color-background-main,
    --color-low-contrast;
}

/* = Import Root Component CSS API */
:import {
  -st-from: "../../components/ShowHide/showhide.st.css";
  -st-default: ShowHide;
  -st-named: title;
}

:import {
  -st-from: "../../components/Text/text.st.css";
  -st-default: Text;
}

:import {
  -st-from: "../../components/Icon/icon.st.css";
  -st-default: Icon;
}

/* = Mixins */
:import {
  -st-from: "../../mixins/textLink.st.css";
  -st-named:
    textLink,
    textLinkHover,
    headerLink,
    headerLinkHover;
}

@st-scope Base {
  ShowHide {
    border-style: solid;
    border-width: 0 0 1px 6px;
    border-color: var(--color-low-contrast);
    --accent-color: var(--color-accent-4);
  }

  /* ShowHide:hover, */
  ShowHide::trigger:hover {
    cursor: pointer;
  }

  ShowHide::trigger {
    background: none;
    border: none;
    border-style: solid;
    border-left-color: var(--color-background-main);
    /* support rtl */
    border-right-color: var(--color-background-main);
    border-width: 0 0 0 6px;
    color: var(--color-heading);
    display: flex;
    justify-content: space-between;
    line-height: 0;
    margin-left: -6px;
    padding: calc(var(--spacing-unit) * 2);
    transition: border-color 300ms, background-color 300ms;
    width: calc(100% + 6px);
    outline: none;
  }

  ShowHide:hover,
  ShowHide:focus-within,
  ShowHide:isExpanded,
  ShowHide::trigger:hover,
  ShowHide::trigger:focus-visible,
  ShowHide:isExpanded::trigger {
    border-left-color: var(--accent-color);
    /* support rtl */
    border-right-color: var(--accent-color);
  }

  ShowHide::title {
    -st-mixin: headerLink;
    color: inherit;
    text-align: left;
    font-weight: 400;
  }

  ShowHide::trigger:hover .title,
  ShowHide::trigger:focus-visible .title {
    -st-mixin: headerLinkHover;
  }

  ShowHide::content {
    font-size: 1rem;
  }

  ShowHide::content Text {
    /* Replicates margins used on body component. */
    margin-bottom: calc(.65em + var(--spacing-unit));
  }

  ShowHide::hiddenContent {
    transition: opacity 250ms, margin-top 250ms, height 250ms;
    overflow: hidden;
    display: block;
    opacity: 0;
  }

  ShowHide:isExpanded::hiddenContent {
    margin-top: -10px;
    opacity: 1;
  }

  ShowHide::content {
    /* tbc */
    background-color: var(--color-background-main);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 3.3) calc(var(--spacing-unit) * 2);
  }

  /* The toggle icon. */
  ShowHide::triggerIcon {
    color: var(--accent-color);
    transition: transform 250ms;
    transform-origin: 0 12px;
  }

  ShowHide:isExpanded::triggerIcon {
    transform: scaleY(-1)
  }
}

@media value(tablet) {
  @st-scope Base {
    ShowHide::trigger {
      padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    }

    ShowHide:isExpanded::hiddenContent {
      margin-top: -16px;
    }

    ShowHide::content {
      padding: 6px 10% calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
    }
  }
}

@st-scope [dir=rtl] Base {

  ShowHide,
  ShowHide::trigger {
    border-left-width: 0;
    border-right-width: 6px;
  }

  ShowHide::trigger {
    margin-left: 0;
    margin-right: -6px;
  }

  ShowHide::content {
    padding-right: calc(var(--spacing-unit) * 6);
    padding-left: calc(var(--spacing-unit) * 2);
  }
}

@media value(tablet) {
  @st-scope [dir=rtl] Base {

    ShowHide::trigger,
    ShowHide::content {
      padding-right: calc(var(--spacing-unit) * 4);
      padding-left: calc(var(--spacing-unit) * 2);
    }

    ShowHide::content {
      padding-left: 10%;
    }
  }
}