@import '../../../common.scss';

$border-color: #375b74;

.footer {
  display: flex;
  align-items: center;
  height: 54px;
  background-color: #476b84;
}

.link {
  padding: 0 17px;
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  height: 100%;
  font-family: $FontRoman;
  font-size: 16px;
  color: $D80;
  text-decoration: none;

  &:hover {
    background: $D30;
    text-decoration: none;
  }

  &:focus,
  &:active { text-decoration: none; }

  &.tinyLink {
    flex: 0 0 54px;
    justify-content: center;
    padding: 0;
  }
}

.tinyLink {
  border: 1px solid $border-color;
  border-top: 0;
  border-bottom: 0;

  &:first-child { border-left-color: transparent; }
  &:last-child { border-right-color: transparent; }

  &:hover { background: $D30; }
}

.linkIcon {
  line-height: 1;
  svg { vertical-align: -1px; }
}

.link:not(.tinyLink) .linkIcon { margin-right: 15px; }

@include withRTL() {
  .tinyLink {
    &:first-child {
      border-left-color: $border-color;
      border-right-color: transparent;
    }
    &:last-child {
      border-left-color: transparent;
      border-right-color: $border-color;
    }
  }

  .link:not(.tinyLink) .linkIcon {
    margin-left: 15px;
    margin-right: 0;
  }
}