@use "vars";

svg {
  transition: stroke var(--base-dur) var(--base-ease);
}

.ico {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: var(--jambonz);
  width: var(--icon-size-1);
  height: var(--icon-size-1);
  border-radius: 100%;

  @media (max-width: vars.$width-mobile) {
    width: var(--icon-size-2);
    height: var(--icon-size-2);
  }

  svg {
    stroke: var(--white);
    width: 22px;
    height: 22px;

    @media (max-width: vars.$width-mobile) {
      width: 18px;
      height: 18px;
    }
  }

  &--dark {
    background-color: var(--dark);
  }

  &--blue {
    background-color: var(--blue);
  }

  &--teal {
    background-color: var(--teal);
  }

  &--purple {
    background-color: var(--purple);
  }

  &--white {
    background-color: var(--white);

    svg {
      stroke: var(--dark);
    }
  }

  &--grey {
    background-color: var(--grey);

    svg {
      stroke: var(--white);
    }
  }

  &--hollow {
    background-color: transparent;
    border: var(--width-border) solid var(--jambonz);

    svg {
      stroke: var(--jambonz);
    }

    &.ico--dark {
      border-color: var(--dark);

      svg {
        stroke: var(--dark);
      }
    }

    &.ico--blue {
      border-color: var(--blue);

      svg {
        stroke: var(--blue);
      }
    }

    &.ico--teal {
      border-color: var(--teal);

      svg {
        stroke: var(--teal);
      }
    }

    &.ico--purple {
      border-color: var(--purple);

      svg {
        stroke: var(--purple);
      }
    }

    &.ico--white {
      border-color: var(--white);

      svg {
        stroke: var(--white);
      }
    }

    &.ico--grey {
      border-color: var(--grey);

      svg {
        stroke: var(--grey);
      }
    }
  }
}

.icos {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-gap: var(--px02);
  flex-wrap: wrap;
}