@import 'io-sanita-theme/theme/bootstrap-italia-base-config';
@import 'io-sanita-theme/theme/io-sanita/mixins';

.header-contacts {
  @include rem-size(font-size, 14);
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--primary-lighter);
  background-color: var(--primary-lightest);

  .row {
    column-gap: 1em;
    row-gap: 0.5rem;

    @media (max-width: #{map-get($grid-breakpoints, md)}) {
      column-gap: 0;
      row-gap: 0.5rem;
    }
    .col.contact-wrapper {
      display: flex;
      width: auto;
      flex-basis: auto;
      flex-grow: 0;
      align-items: center;
      column-gap: 0.5em;

      .icon {
        width: 1.2em;
        min-width: 1.2em;
        height: 1.2em;
      }
      .link-value {
        p {
          @include rem-size(font-size, 14);
          margin: 0;
          a:hover {
            text-decoration: underline;
          }
        }
      }

      @media (max-width: #{map-get($grid-breakpoints, md)}) {
        &:nth-child(even) {
          justify-content: flex-end;
        }
      }
      .item-description {
        @media (max-width: #{map-get($grid-breakpoints, lg)}) {
          display: none;
        }
      }

      .item-type {
        font-weight: 700;
      }
      a {
        color: var(--is-accent);
        .icon.external-link {
          display: none;
        }
      }
    }
  }
}

@media (max-width: #{map-get($grid-breakpoints, ml)}) {
  .it-header-wrapper.is-sticky.it-header-sticky {
    .header-contacts .container {
      padding-right: 0;
      padding-left: 0;
    }
  }
}