// chappe
//
// Copyright 2021, Crisp IM SAS
// Author: Valerian Saliou <valerian@valeriansaliou.name>

.viewer
  &[data-viewer-panes="2"],
  &[data-viewer-panes="3"]
    #content
      .panes
        .content
          margin-left: $content-sidebar-left-width

    #footer
      &:before
        content: ""
        background-color: var(--color-white)
        width: $content-sidebar-left-width
        flex: 0 0 auto

      .inner
        border-left: 1px solid var(--color-viewer-panes-footer-border)

  &[data-viewer-panes="3"]
    #header
      .search
        background: var(--color-header-search-background-clear)
        border-color: var(--color-header-search-border-clear-default)

        &:hover
          border-color: var(--color-header-search-border-clear-hover)

        &:active
          border-color: var(--color-header-search-border-clear-active)

      .coloring
        background-color: var(--color-header-coloring-background-clear)


//- Media Queries

// For screens below defined widths

@media screen and (max-width: $screen-medium-width-breakpoint)
  .viewer
    &[data-viewer-panes="3"]
      #header
        .search
          background: var(--color-header-search-background-default)
          border-color: var(--color-header-search-border-default)

          &:hover
            border-color: var(--color-header-search-border-hover)

          &:active
            border-color: var(--color-header-search-border-active)

        .coloring
          background-color: var(--color-header-coloring-background-default)

@media screen and (max-width: $screen-small-width-breakpoint)
  .viewer
    &[data-viewer-panes="2"],
    &[data-viewer-panes="3"]
      #content
        .panes
          .content
            margin-left: 0

      #footer
        &:before
          display: none

        .inner
          border-left: 0 none