@import '../../../../styles/tools/mixins/font.scss';

.wrapper {
  display: flex;
}

.sareSozialak {
  display: flex;
  align-items: center;
  list-style-type: none;
}

.sareSoziala {
  width: var(--size-base);
  height: var(--size-base);

  &:not(:last-child) {
    margin-right: var(--size-small);
  }
}

.sareSozialLogo {
  width: var(--size-base);
  height: var(--size-base);
}

.helbidea {
  padding-right: var(--size-small);
  margin-right: var(--size-small);

  @include tinyFont;
}

.themeBorder {
  border-right: 3px solid var(--color);
}

.zuriBorder {
  border-right: 3px solid var(--color-zuria);
}

.themeLogo {
  path {
    transition: fill 0.4s ease;
    fill: var(--color);
  }

  &:hover {
    path {
      fill: var(--hover-color);
    }
  }
}

.zuriLogo {
  path {
    transition: fill 0.4s ease;
    fill: var(--color-zuria);
  }

  &:hover {
    path {
      fill: var(--color-gorria);
    }
  }
}

.themeLink {
  &:focus {
    outline: 3px solid var(--hover-color);
  }
}

.zuriLink {
  &:focus {
    outline: 3px solid var(--color-gorria);
  }
}
