@import '../../global-sass-files/variables';

// Submenu
.submenu {
  &-top, &-bottom {
    display: flex;
  }
  &-top {
    position: relative;
    padding: 6px 20px 7px 20px;
    flex-wrap: wrap;
    align-items: center;
    background-color: #232f39;
    .icons-toggle-arrow {
      position: absolute;
    }
  }
  &-toggle {
    display: none;
  }
  &-items {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  &-item {
    position: relative;    
    width: 100%;
    float: left;
    display: block;
    &-count {
      float: right;
      padding: 10px;
      font-family: $primary-font-light;
      color: $white-color;
      font-size: .8rem;
      text-decoration: none;
      position: absolute;
      right: 0;
    }
    &-title {
      position: relative;
      float: left;
      padding: 10px;
      font-family: $primary-font-light;
      color: $white-color;
      font-size: .8rem;
      text-decoration: none;
      display: block;
      padding-left: 10px;
    }
    &-dotted {
      padding-left: 22px;
    }
    &-dot {
      position: absolute;
      left: 10px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%);
      &.dot-red {
        background-color: #ed1b23;
      }
      &.dot-orange {
        background-color: #ffa125;
      }
      &.dot-gray {
        background-color: #818185;
      }
      &.dot-gray-light {
        background-color: #cdcdcd;
      }
      &.dot-green {
        background-color: #87bd23;
      }
      &.dot-blue {
        background-color: #2ad1d4;
      }
    }
  }
  &-toggle {
    position: absolute;
    left: 0px;
    background-color: #232f39;
    padding: 10px;
    top: 100%;
    z-index: 99;
    box-sizing: border-box;
    // display: none;
    text-align: left;
    width: 100%;
  }
  &-active {
    background-color: #000915;
    .icons-toggle-arrow {
      transform: rotateZ(180deg);
    }
    .submenu-toggle {
      display: block;
    }
  }
  &-header {
    .profile {
      &-user {
        &-type, &-edit, &-name {
          font-family: $primary-font-light;
          color: $white-color;
          text-decoration: none;
          font-size: .8rem;
        }
        &-type {
          display: inline-block;
          width: 51%;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        &-edit {
          margin-left: 4px;
          float: right;
          text-decoration: underline;
        }
        &-name {
          display: block;
          margin-bottom: 10px;
        }
        &-button {
          font-size: .785rem;
          color: #ffa225;
          text-decoration: none;
          font-family: $primary-font-light;
          text-align: left;
          border-radius: 16px;
          border: 1px solid rgba(255, 161, 37, 1);
          background-color: transparent;
          display: block;
          width: 100%;
          outline: none;
          position: relative;
          padding: 5px 27px 5px 10px;
          box-sizing: border-box;
          &:hover {
            color: rgb(0,9,22);
            background-color: rgba(255, 161, 37, 1);
            .btn-logout-icon, .icon-copied {
              &:before {
                color: rgba(0, 9, 21, 1);
              }
            }
          }
          span:first-child {
            line-height: 17px;
            display: block;
          }
        }
      }
      &-bookmark-link {
        margin: 14px 9px 13px;
        width: 62%;
        border: 1px solid #bcbdc0;
        padding: 7px 6px;
        border-radius: 3px;
        outline: none;
        box-sizing: border-box;
      }
    }
    .btn-logout-icon {
      width: 19px;
      height: 19px;
      position: absolute;
      right: 9px;
      top: 50%;
      transform: translateY(-50%);
      &:before {
        content: "\e90d";
        color: rgba(255, 161, 37, 1);
        font-size: 19px;
      }
      &.icon-copied {
        &:before {
          content: "\e90c";
          color: rgba(0, 9, 21, 1);
          color: rgba(255, 161, 37, 1);
        }
      }
    }
    .button-wrap {
      .btn {
        margin-top: 10px;
        float: right;
      }
    }
  }
}