@use "@styles/abstracts/functions" as fun;

.wrapper {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  border: fun.convert-px(1) solid var(--color-border);
}

.cover {
  height: fun.convert-px(150);
  position: relative;
}

.info {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));
  align-items: start;
  justify-content: left;
  column-gap: var(--spacing-md);
  margin: var(--spacing-md) 0 0;
}

.inline-data {
  display: inline-block;
  margin-top: fun.convert-px(3);

  &:not(:last-of-type) {
    margin-right: var(--spacing-xs);
  }
}

.techno {
  padding: 0 var(--spacing-2xs);
  border: fun.convert-px(1) solid var(--color-primary-darker);
}

.repo {
  display: block;
  width: 3em;
  height: 3em;
  background: none;
  box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
      var(--color-shadow),
    fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-1)
      var(--color-shadow),
    fun.convert-px(3) fun.convert-px(4) fun.convert-px(4) fun.convert-px(-3)
      var(--color-shadow),
    0 0 0 0 var(--color-shadow);
  transition: all 0.3s linear 0s;

  &:hover,
  &:focus {
    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
        var(--color-shadow),
      fun.convert-px(1) fun.convert-px(1) fun.convert-px(2) fun.convert-px(-1)
        var(--color-shadow-light),
      fun.convert-px(3) fun.convert-px(3) fun.convert-px(4) fun.convert-px(-4)
        var(--color-shadow-light),
      fun.convert-px(6) fun.convert-px(6) fun.convert-px(10) fun.convert-px(-3)
        var(--color-shadow);
    transform: scale(1.15);
  }

  &:focus {
    outline: var(--color-primary) dashed fun.convert-px(2);
  }

  &:active {
    box-shadow: 0 0 0 0 var(--color-shadow);
    outline: none;
    transform: scale(0.9);
  }
}