$sidebar-width: 240px; // NOTE: must be the same as in apps/keira/src/app/scss/_variables.scss

$bg-sidebar-wrapper: #1d1d1d;
$border-color: #2b2b2b;
$color: #bdbdbd;
$header-menu-color: #6c7b88;
$hover-color: #ffffff;

$img-bg-sidebar-wrapper: rgba(29, 29, 29, 0.85);
$img-border-color: rgba(255, 255, 255, 0.1);

@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(10deg);
  }
  30% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(5deg);
  }
  70% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.sidebar {
  width: $sidebar-width;
  height: 100%;
  max-height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  transition: left 0.3s ease;

  hr {
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    margin: 4px 10px;
  }

  a {
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .sidebar-content {
    max-height: calc(100% - 30px);
    height: calc(100% - 30px);
    overflow-y: auto;
    position: relative;

    .sidebar-header {
      font-size: 0.8rem;
      text-align: center;
      padding: 10px 20px;
      display: flex;
      align-items: center;

      > a {
        text-transform: uppercase;
        font-weight: bold;
        flex-grow: 1;
        text-decoration: none;
      }
    }

    .sidebar-profile {
      padding: 14px 18px;
      overflow: hidden;

      .user-pic {
        float: left;
        width: 60px;
        padding: 2px;
        border-radius: 12px;
        margin-right: 15px;
        overflow: hidden;

        img {
          object-fit: cover;
          height: 100%;
          width: 100%;
        }
      }

      .user-info {
        float: left;

        > span {
          display: block;
        }

        .db-user,
        .db-name {
          font-size: 12px;
          color: #bdbdbd;
        }

        .db-host {
          font-size: 0.8rem;
          .port {
            color: lightgray;
          }
        }

        .user-status {
          font-size: 11px;
          margin-top: 4px;

          i {
            font-size: 8px;
            margin-right: 4px;

            &.connection-status {
              color: red;

              &.connected,
              &.authenticated {
                color: #5cb85c;
              }
            }
          }
        }
      }
    }

    .sidebar-menu {
      padding-top: 4px;
      padding-bottom: 10px;

      .header-menu span {
        font-weight: bold;
        font-size: 14px;
        padding: 15px 20px 5px 20px;
        display: inline-block;
      }

      ul {
        list-style-type: none;
        padding: 0;
        margin: 0;

        li a {
          display: inline-block;
          width: 100%;
          text-decoration: none;
          position: relative;
          padding: 8px 30px 8px 10px;
          cursor: pointer;

          i {
            margin-right: 10px;
            font-size: 0.9rem;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 4px;
          }

          &:hover > i::before {
            display: inline-block;
            animation: swing ease-in-out 0.5s 1 alternate;
          }

          span.label,
          span.badge {
            float: right;
            margin-top: 8px;
            margin-left: 5px;
          }
        }
      }

      .sidebar-dropdown {
        > a:after {
          font: var(--fa-font-solid);
          content: '\f105';
          display: inline-block;
          font-style: normal;
          font-variant: normal;
          text-rendering: auto;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          text-align: center;
          background: 0 0;
          position: absolute;
          right: 15px;
          top: 14px;
          transition: transform 0.3s ease;
        }

        .sidebar-submenu {
          overflow: hidden;

          ul {
            padding: 5px 0;
          }

          li {
            font-size: 13px;

            a {
              .badge,
              .label {
                float: right;
                margin-top: 0;
              }

              &.active {
                font-weight: bold;
                color: #fff;
              }
            }
          }
        }

        &.active > a:after {
          transform: rotate(90deg);
          right: 15px;
        }
      }
    }
  }
}

.sidebar {
  background-color: $bg-sidebar-wrapper;

  .sidebar-profile,
  .sidebar-menu {
    border-top: 1px solid $border-color;
  }

  .sidebar-profile .user-info .db-user,
  .sidebar-profile .user-info .user-status,
  .sidebar-header > a,
  .sidebar-menu ul li a,
  #close-sidebar {
    color: $color;
  }

  .sidebar-menu ul li:hover > a,
  .sidebar-menu .sidebar-dropdown.active > a,
  .sidebar-profile .user-info,
  .sidebar-header > a:hover,
  #close-sidebar:hover {
    color: $hover-color;
  }

  ul li:hover a i,
  .sidebar-dropdown .sidebar-submenu li a:hover:before,
  .sidebar-menu .sidebar-dropdown.active a i {
    color: $hover-color;
  }

  .sidebar-menu ul li a i,
  .sidebar-menu .sidebar-dropdown div {
    background-color: $border-color;
    border: none;
    margin-left: 1px;
  }

  .sidebar-menu .header-menu span {
    color: $header-menu-color;
  }

  &.sidebar-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: $img-bg-sidebar-wrapper;
    }

    .sidebar-profile,
    .sidebar-menu {
      border-top: 1px solid $img-border-color;
    }

    .sidebar-menu ul li a i,
    .sidebar-menu .sidebar-dropdown div {
      background-color: $img-border-color;
    }
  }
}

.sidebar-button {
  position: fixed;
  bottom: 10px;
  left: 10px;
}
