.actionbar {
  display: flex;
  flex-direction: row;
  margin-top: 5px;
  color: var(--match-color);
  font-weight: bold;
}

.action {
  margin-left: 10px;
  button {
    background: var(--color-white);
    border: 0;
  }

  &:hover {
    font-weight: bold;
  }
}

.action--first {
  margin-left: 0px;
}

.action--enabled {
  display: inherit;
}

.action--disabled {
  display: none;
}

.action__text {
  color: #727272;
  font-size: 12px;
  text-align: center;
  margin-top: 5px;
  font-family: var(--font-family-text);
}

.action__icon {
  margin: auto;
  height: 25px;
}

.action--share{
  p{
    line-height: 24px;
  }
  .action__button .share__icon{
    height: 25px;
    filter: invert(38%) sepia(7%) saturate(3122%) hue-rotate(175deg) brightness(98%) contrast(84%);
  }
}

.action--exclude{
  p{
    line-height: 23px;
  }
}

.dropdown-menu--action-bar{
  position: relative;
  .dropdown-menu__content {
    top: 20px;
    right: 0;
  }
}

.dropdown-menu--action-bar{
  .dropdown-menu__icon{
    cursor: pointer;
  }
  .dropdown-menu__content {
    width: 196px;
    img{
      margin-right: 10px;
      width: 19px;
    }
    p{
      font-size: 14px;
      font-weight: normal;
    }
    p:hover{
      font-weight: bold;
    }
    .action--exclude .action__button a{
      display: flex;
      font-weight: normal;
      font-size: 15px;
    }
    .action__button{
      display: flex;
    }
  }
}


@media (max-width: 845px){
  .action {
    button {
      padding-right: 5px;
      padding-left: 5px;
    }
  }
  .action {
    margin-right: 0;
  }
  .action__text{
    font-size: 11px;
  }
  .action--share{
    .action__button .share__icon{
      height: 26px;
    }
  }
  .action--share .action__button p {
    font-size: 11px !important;
  }
}

@media only screen
and (min-device-width : 708px)
and (max-device-width : 1024px)
and (orientation : landscape){
  .action__text{
    font-size: 11px;
  }
  .action {
    margin-left: 5px;
    margin-right: 5px;
  }
  .action--share .action__button p {
    font-size: 11px;
  }
}

@media only screen
and (min-device-width : 708px)
and (max-device-width : 1024px)
and (orientation : portrait){
  .action__text{
    font-size: 11px;
  }
  .action--share .action__button p {
    font-size: 11px !important;
  }
  .action{
    margin-right: 4px;
  }
}

@media only screen
and (min-device-width : 1024px)
and (max-device-width : 1366px)
and (orientation : portrait) {

}

@media only screen
and (min-device-width : 1024px)
and (max-device-width : 1366px)
and (orientation : landscape) {

  .action__text{
    font-size: 12px;
  }
}