/*
 * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */

.sidebar-button {
  @import '../style/variables.scss';

  height: $height;
  flex: 0 0 $height;
  width: 100%;
  display: flex;
  align-items: center;
  border: solid 1px rgba(0, 0, 0, 0.15);
  user-select: none;
  cursor: pointer;
  background: transparent;
  padding: 0;
  transition: height 0.2s, flex-basis 0.2s;
  overflow: hidden;

  &.hide {
    flex-basis: 0;
    height: 0px;
    border-width: 0px;

    .sidebar-icon {
      opacity: 0;
    }

    .sidebar-text {
      opacity: 0;
    }
  }

  .sidebar-icon {
    transition: opacity 0.2s;
    opacity: 1;
    height: $height;
    width: $height;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 40px;
  }

  .sidebar-text {
    height: 100%;
    display: flex;
    align-items: center;
    opacity: 1;
    transition: opacity 0.2s;
    text-align: left;
    flex: 1 1 0;
    width: 0;
  }

  @mixin colors {
    color: $dark;


    &.sidebar-button-primary {
      background: $primary;
      color: $white;

      &:hover {
        color: $primary;
        background: $entry-hover-bg;
      }
    }

    &:hover {
      background: $entry-hover-bg;
      color: $dark;
    }
  }

  @import "../../../../../global-styles/variables.light";
  $entry-hover-bg: darken($body-bg, 10%);
  @include colors;

  :global(body.dark) & {
    @import "../../../../../global-styles/variables.dark";
    $entry-hover-bg: darken($body-bg, 10%);
    @include colors;
  }
}


