@import '~styles/mixins';
@import '~styles/adminMixins';

.nav-resource-item {
  display: flex;
  padding: 0 $default_spacing_h;
  box-shadow: inset 0 -2px 0 #ededed;
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
  margin-top: -10px;
  padding-top: 10px;
  height: 70px;
  flex-shrink: 0;

  .item {
    padding: 0 20px;
    font-size: 15px;
    color: black;
    flex-shrink: 0;
    display: flex;
    align-items: center;

    &:hover {
      border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    }

    &.state-active {
      border-bottom: 2px solid $color_primary;
      font-weight: bold;
    }
  }

  .category {
    position: relative;
    border-left: 1px solid #ededed;
    width: 0;
    .category-container {
      position: relative;
      font-size: 10px;
      top: -10px;
      width: 200px;
      display: flex;
      .category-item {
        background-color: #ededed;
        color: black;
        border-radius: 3px;
        padding: 4px 10px;
        border-bottom-left-radius: 0px;
        .icon {
          margin-right: 5px;
        }
      }
    }
  }

  .arrow-container{
    position: sticky;
    right: 0px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .arrow{
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 35px;
      width: 35px;
      background-color: white;
      border-radius: 35px;
      border: 1px solid $color_border;
      svg{
        position: relative;
        right: -1px;
      }
      @include box-shadow(0, 2px);
      &:hover{
        background-color: $color-light-grey;
      }
    }

    &.left{
      left: 0px;
      .arrow{
        svg{
          left: -1px;
        }
      }
    }
  }
}
