@import './colors.less';

.unclickable-btn {
  opacity: 0.5;
  color: grey !important;
  cursor: not-allowed !important;
  position: relative;

   &:hover {
     .tooltiptext {
       visibility: visible;
       opacity: 1;
     }
   }
}

.version-switcher {
  position: relative;
  width: 180px;
  border-radius: 7px;
  line-height: 40px;
  margin-bottom: 25px;
  display: inline-block;
  z-index: 8;

  button {
    width: 100%;
    text-align: left;
    color: @themeBlue;
    position: relative;
    background-color: #f5f5f5;
    font-weight: 400;
    padding: 15px;
    font-size: 16px;
    border-radius: 6px;

    &,
    &:hover,
    &:focus,
    &:active {
      border: none;
      background-color: #f5f5f5;
      color: @themeBlue;
      box-shadow: none;

      @media screen and (max-width: 959px) {
        background: #F7F8F9;
      }
    }

    &::after {
      position: absolute;
      right: 12px;
      top: 21px;
      margin-left: 0;
      vertical-align: middle;
      content: "";
      border-top: .4em solid @themeBlue;
      border-right: .4em solid transparent;
      border-bottom: 0;
      border-left: .4em solid transparent;
      border-radius: .2em;
    }
  }

  .visibility-hide {
    visibility: hidden;
  }

  .dropdown-menu {
    margin: 8px 0;
    width: 100%;
    position: absolute;
    font-size: inherit;
    color: #212529;
    background-color: #f5f5f5;
    border-radius: 7px;
    overflow: visible;
    box-shadow: 0 7px 16px rgba(32, 41, 81, .17);

    .dropdown-item {
      font-weight: 300;
      font-size: 15px;
      line-height: 40px;
      padding: 0 16px 3px;
      display: block;

      &:hover {
        color: @themeBlue;
        background: #ededed;
      }
    }
  }
}

.tooltiptext {
  visibility: hidden;
  width: 180px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px;
  position: absolute;
  z-index: 1;
  font-size: 12px;
  line-height: 1.7;
  left: 55px;
  opacity: 1;
  border-radius: 4px;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

.tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}