@import './src/styles/variables';

// .factorio-icon-container {
//   display: inline-flex;
//   vertical-align: middle;
//   position: relative;
//   padding: 3px;
//   margin: 0 2px;
//   border-radius: 2px;

//   &.icon-space {
//     margin: 5px;
//   }

//   & img {
//     vertical-align: middle;
//     height: 1.75rem;
//     width: auto;
//     filter: drop-shadow(2px 2px 2px $c-pallette-transp-medium);
//     box-shadow: none;
//     margin-bottom: 2px;
//   }

//   & .factorio-icon-text {
//     position: absolute;
//     bottom: 0;
//     right: 3px;
//     color: #fff;
//     font-weight: bold;
//     font-size: 0.8em;
//     text-shadow: 0px 1px 1px #000, 0px -1px 1px #000, 1px 0px 1px #000,
//       -1px 0px 1px #000;
//   }

//   & factorio-icon-space-age {
//     position: absolute;
//     top: 0;
//     right: 3px;
//     width: 16px;
//     // height: 16px;
//   }
// }

:host {
  display: inline-flex;
  vertical-align: middle;
  position: relative;
  padding: 3px;
  margin: 0 2px;
  border-radius: 2px;

  &.icon-space {
    margin: 5px;
  }

  & > img {
    vertical-align: middle;
    height: 1.75rem;
    width: auto;
    filter: drop-shadow(2px 2px 2px $c-pallette-transp-medium);
    box-shadow: none;
    margin-bottom: 2px;
  }

  & > .factorio-icon-sm {
    height: 1.5rem;
  }

  & > .factorio-icon-text {
    position: absolute;
    bottom: 0;
    right: 0px;
    color: #fff;
    font-weight: bold;
    font-size: 0.8em;
    text-shadow: 0px 1px 1px #000, 0px -1px 1px #000, 1px 0px 1px #000,
      -1px 0px 1px #000;
  }

  & > .factorio-icon-space-age {
    position: absolute;
    top: 0;
    right: 0px;
    width: 16px;
    height: 16px;
  }
}

@media (min-width: 768px) {
  :host {
    & > img {
      height: 2rem;
    }
  }
}
