// Variables
// Bright Mirror background colors
$light-khaki: #f1fbe5;
$duck-egg-blue: #b7f4f0;

// Other colors
$pale-blue: #cef1ff;
// Striped background colors
$ice: #d2ffee;
$alt-ice: #6a9986;

$fiction-toolbar-icon-size: 17px;

// Mixins
// Dynamic background color for Bright Mirror
@mixin set-background($theme) {
  @if $theme == default {
    /* stylelint-disable-next-line declaration-colon-newline-after */
    background-image: radial-gradient(circle at 49% 95%, $light-khaki, $duck-egg-blue);
  }
}

:focus {
  outline: none;
}

// Bright mirror global style
.bright-mirror-fiction {
  padding-bottom: 30px;
  padding-top: 15px;

  p {
    min-height: 1em;
    margin: 0;
  }
}

.side-comment-container {
  position: absolute;
  left: 0;
  padding-top: 10px;
}

.bright-mirror-comments {
  padding: 30px 0;
  z-index: 100;
  position: relative;

  .comments-content {
    background-color: $white;
    padding: 30px 15px 20px 15px;

    .level {
      .expand-indented {
        display: none;
      }

      .border-left {
        border-left: none;
      }
    }
  }
}

.background-fiction-default {
  @include set-background(default);
}

.background-comments-default {
  // Striped background
  background: repeating-linear-gradient(-45deg, $ice, $ice 4px, $white 2px, $white 7px);
}

@media screen and (min-width: $screen-sm-min) {
  .bright-mirror-fiction {
    padding-left: 70px;
    padding-right: 70px;
  }

  .bright-mirror-comments {
    padding: 40px;

    .comments-content {
      margin-left: 0;
      padding-left: 70px;
      padding-right: 70px;

      // Tree.jsx style adjustments
      .level {
        .expand-indented {
          display: inline-block;
        }

        .level-1,
        .level-2 {
          padding-left: 40px;
        }
      }
    }
  }
}

@media screen and (min-width: $screen-xl-min) {
  .bright-mirror-fiction,
  .bright-mirror-comments {
    padding: 30px 200px 70px;
  }

  .bright-mirror-comments {
    .comments-content {
      padding: 80px 50px;
    }
  }
}

// Component imports
@import 'components/backButton';
@import 'components/circleAvatar';
@import 'components/toggleCommentButton';
@import 'components/deletePostButton';
@import 'components/editPostButton';
@import 'components/replyToCommentButton';
@import 'components/commentHelperButton';
@import 'components/fictionHeader';
@import 'components/fictionToolbar';
@import 'components/fictionBodyToolbar';
@import 'components/fictionBody';
@import 'components/fictionCommentHeader';
@import 'components/fictionCommentForm';
@import 'components/fictionComment';
@import 'components/fictionCommentList';
@import 'components/fictionEditModal';
@import 'components/fictionPreview';
@import 'components/fictionsList';
@import 'components/instructionsText';
@import 'components/fictionSideCommentAnchor';
@import 'components/fictionSideCommentBadge';
@import 'components/fictionSideCommentBox';
