// Copyright (c) Microsoft. All rights reserved.

@import 'src/styles/themes';
@import 'src/styles/mixins';

.flyout-section {

  .flyout-section-header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: inherit;
    font-family: inherit;
    @include rem-fallback(height, 48px);
    @include rem-font-size(16px);

    .collapse-section-icon {
      transition: all 100ms linear;
      margin-right: 2 * $grid-size;

      svg { @include square-px-rem(14px); }

      &.collapsed { transform: rotate(90deg); }
      &.expanded { transform: rotate(-90deg); }
    }
  }

  button.flyout-section-header { cursor: pointer; }

  .flyout-section-content {
    @include rem-fallback(padding-bottom, 24px);
    @include rem-font-size(14px);
  }

  @include themify($themes) {
    &:not(:first-child) {
      border-top: 1px solid themed('colorFlyoutSectionBorder');
    }

    .flyout-section-header {
      color: themed('colorContentText');

      .collapse-section-icon svg { fill: themed('colorContentTextDim'); }

      &:hover .collapse-section-icon svg { fill: themed('colorContentText'); }
    }
  }
}
