@use 'pix-design-tokens/typography';

.companion-blocker {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  height: 100vh;
  color: var(--pix-neutral-0);
  text-align: center;
  background-color: var(--pix-certif-500);

  > h1 {
    @extend %pix-title-m;
  }

  > p {
    @extend %pix-body-l;

    max-width: 500px;
  }

  &__list {
    display: flex;
    flex-direction: column;
    gap: var(--pix-spacing-2x);
    padding-top: var(--pix-spacing-2x);
  }
}

.companion-blocker-list {
  &__refresh-button {
    width: 100%;
    color: var(--pix-neutral-0);
    background-color: var(--pix-certif-500);
    border: 2px solid var(--pix-neutral-0);

    &:hover {
      > svg {
        fill: var(--pix-primary-700);
      }
    }

    &:focus {
      > svg {
        fill: var(--pix-primary-900);
      }
    }
  }
}

.companion-blocker-refresh-button {
  &__icon {
    width: 2rem;
    height: 1rem;
    padding-right: var(--pix-spacing-1x);
    fill: var(--pix-neutral-0);
  }
}
