"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/**
 * https://bitbucket.org/skava-admin/skreact/commits/c756fee64c789215d21f30f23e6e9a67ecd94ba4
 * ^ side effects of scoping this to a global tag when it wasn't needed
 */
const title = styled.mixin `
  .title {
    @font (13, semi);
    cursor: pointer;
    color: $colors-black;
    text-transform: uppercase;
    margin-bottom: 0;
    padding: $spacing;
    display: flex;
    align-items: center;
    width: 100%;
  }

  .arrow {
    margin-left: auto;
  }
`;
const collapse = styled.mixin `
  .collapse,
  .collapsing {
    transition: max-height 0.6s;
    overflow: hidden;

    .inner {
      background-color: $colors-white;
      color: $colors-body-text;
      padding: $spacing;
    }

    .title {
      color: $colors-secondary;
      text-transform: uppercase;
      font-weight: bold;
      margin: 0;
    }

    &.hide {
      /* display: none; */
    }
  }

  &.closed {
    .collapse {
      max-height: 0 !important;
      /* pointer-events: none; */
    }
  }

  .collapse {
    /* display: none; */

    /* max-height: 0; */
    /* overflow: hidden; */

    &.show {
      pointer-events: all;
      /* display: block; */
      /* overflow: auto; */

      /* @james @fixme @todo */
      /* max-height: 1000px; */
    }
  }
`;
// @note - this is the spinny thing
const openClose = styled.todo `
  .accordion-block {
    &.open .arrow {
      transform: rotate(-180deg);
    }
    &.show .arrow {
      transform: rotate(180deg);
    }
  }
`;
exports.default = styled.todo `
  .accordion-block  > .title {
    background: $colors-white;
  }
  .accordion-block {
    border-top: $border-thin;

    ${title}
    ${collapse}
    ${openClose}
  }
`;
//# sourceMappingURL=styles.js.map