// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.

.navigation-area {
  position: relative;
  min-width: 280px;
  max-width: 280px;
  height: 100vh;
  left: 0;
  background-color: #fff;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  &__logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    margin-bottom: 50px;
    margin-left: 60px;

    &__img {
      width: 54px;
      height: 60px;
    }

    &__text {
      margin-left: 12px;
      width: 69px;
      height: 16px;
    }
  }

  &__satellite {
    text-align: center;
    margin-bottom: 100px;

    &__span_title {
      color: #354049;
      opacity: 0.41;
      font-family: 'font_regular';
      line-height: 21px;
      font-size: 16px;
    }

    &__span_name {
      color: #354049;
      font-family: 'font_medium';
      line-height: 21px;
      font-size: 16px;
      margin-left: 5px;
    }
  }

  &__item-container {
    height: 70px;
    padding-left: 60px;
    border-left: 3px solid transparent;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    &.router-link-active,
    &:hover {
      border-left: 3px solid #2683FF;
      .svg path:not(.white) {
        fill: #2683FF !important;
      }
    }

    &__link-container {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      h1 {
        font-family: 'font_medium';
        font-size: 16px;
        line-height: 23px;
        color: #354049;
        margin-left: 15px;
      }

      &__add-button {
        margin-left: 40px;
        background-color: transparent;

        &:hover {
          svg {
            border-radius: 50px;
            box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
          }
        }
      }
    }
  }
}

a {
  text-decoration: none;
  outline: none;
}

.disabled {
  pointer-events:none;
  opacity:0.6;
}

@media screen and (max-width: 1024px) {
  .navigation-area {
    width: 80px;
    max-width: 80px;
    min-width: 80px;

    &__logo {
      margin-left: 20px;
    }

    &__logo__text {
      display: none;
    }

    &__item-container {
      padding-left: 26px;

      &__link-container {
        h1 {
          display: none;
        }

        &__add-button {
          display: none;
        }
      }
    }
  }
}