@import "../../../assets/scss/variables";


.floating-widget {
  .files-quick-access {

    padding: 10px 0;

    li {
      color: $title-color;
      font-size: 1.4rem;
      height: 55px;
      line-height: 55px;
      font-weight: bold;
      margin: 0 -30px;
      position: relative;

      p.normal {
        text-align: center;
        display: block;
        color: inherit;
        height: 100%;
        font-size: inherit;
        font-weight: bold;
        transition: none;
        padding: 0 16px;

        &.active {
          pointer-events: none;
          color: $alternate-text-color;

        }

        span {
          display: block;
          border-bottom: 1px dashed #707070;
          padding-left: 10px;
        }

        &:hover {
          background: $secondary-color;
          color: $white;


          span {
            border: none;
          }
        }
      }

      p.on-hover {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;

        span {
          flex: 1 0 0;
          text-align: center;
          color: $white;
          font-size: 1.4rem;
          position: relative;
          cursor: pointer;

          &:not(:last-child)::after {
            position: absolute;
            right: 0;
            content: '';
            border-right: 1px dashed $white;
            width: 1px;
            height: 28px;
            top: calc(50% - 14px);

          }

        }
      }


      &.inactive {
        pointer-events: none;

        color: $alternate-text-color;
      }

    }

    li:hover {

      p {
        display: none;
      }

      p.on-hover {
        background: $blue-to-gray;
        display: flex;
      }
    }
  }
}