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

.action {
  margin-left: 10px;
  button {
    padding: 4px 6px 0;
    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: 11px;
  text-align: center;
  margin-top: 5px;
  font-family: var(--font-family-text);
}

.actionbar button[aria-label] {
  position: relative;

  &:hover::after, &:focus-visible::after {
    content: attr(aria-label);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    border-radius: 4px;
    background-color: var(--color-dark);
    color: var(--color-white);
    font-family: var(--font-family-text);
    font-size: 12px;
    font-weight: normal;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
  }
}

.action__icon {
  margin: auto;
  width: auto;
  height: 18px;
}

.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%);
  }
}

@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;
  }
}