.buttons {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-app-region: no-drag;

  &.focused {
    .button {
      color: var(--gray700);

      &:hover {
        color: var(--gray900);
      }
    }
  }
}

.button {
  position: relative;
  width: 45px;
  height: 30px;
  text-align: center;
  color: var(--gray600);

  &:hover {
    color: var(--gray900);
    background-color: var(--primary100);
  }
}

.minimize {
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 1px;
    background-color: currentColor;
  }
}

.maximize {
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border: 1px solid currentColor;
  }
}

.restore {
  &:before {
    content: '';
    position: absolute;
    top: 9px;
    left: 20px;
    width: 10px;
    height: 10px;
    border: 1px solid currentColor;
  }
  &:after {
    content: '';
    position: absolute;
    top: 12px;
    left: 16px;
    width: 10px;
    height: 10px;
    border: 1px solid currentColor;
    background-color: var(--gray200);
  }

  &:hover:after {
    background-color: var(--primary100);
  }
}

.close {
  &:hover {
    background-color: var(--red400);
  }

  &:before {
    content: '';
    position: absolute;
    top: 14px;
    left: 16px;
    transform: rotate(-45deg);
    width: 14px;
    height: 1px;
    background-color: currentColor;
  }
  &:after {
    content: '';
    position: absolute;
    top: 14px;
    left: 16px;
    transform: rotate(45deg);
    width: 14px;
    height: 1px;
    background-color: currentColor;
  }
}
