/**
  * Links component styles
 */

.block-links {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow-md);container-type: inline-size;
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--spacing) * .75);
  padding: calc(var(--spacing) * 2.25);

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    &:not(:last-child) {
      margin-bottom: calc(var(--spacing)*.75);
    }
  }

  a {
    transition: var(--transition);
    display: flex;
    color: var(--body-font-color) !important;
    text-decoration: none;

    &:hover,
    &:focus {
      transform: translate3d(10px, 0, 0);
      color: var(--body-font-color) !important;

      .icon {
        background: var(--secondary-color);

        svg * {
          fill: var(--white)
        }
      }
    }
  }

  .icon {
    transition: var(--transition);
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    align-items: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--secondary-color);
    border-radius: 50%;
    margin-right: calc(var(--spacing) * .75);

    svg {
      color: var(--secondary-color);
      width: 9px;

      * {
        transition: fill .25s ease;
        fill: var(--secondary-color)
      }
    }
  }
}