/*
OSC - ICON
v 1.2.2
date: 2018. 11. 09
*/

@charset 'utf-8';

// OSC-FONT-ICON------------------------------------------------
@import "icon-variables";

@font-face {
  font-family: '#{$osc-icon-font-family}';
  src:  url('#{$osc-icon-font-path}/#{$osc-icon-font-family}.eot?6j6h1r');
  src:  url('#{$osc-icon-font-path}/#{$osc-icon-font-family}.eot?6j6h1r#iefix') format('embedded-opentype'),
    url('#{$osc-icon-font-path}/#{$osc-icon-font-family}.ttf?6j6h1r') format('truetype'),
    url('#{$osc-icon-font-path}/#{$osc-icon-font-family}.woff?6j6h1r') format('woff'),
    url('#{$osc-icon-font-path}/#{$osc-icon-font-family}.svg?6j6h1r##{$osc-icon-font-family}') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="osc-"], [class*=" osc-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: '#{$osc-icon-font-family}' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.osc-icon-tree-minus {
  &:before {
    content: $osc-icon-tree-minus; 
  }
}
.osc-icon-tree-plus {
  &:before {
    content: $osc-icon-tree-plus; 
  }
}
.osc-icon-arrow1-down {
  &:before {
    content: $osc-icon-arrow1-down; 
  }
}
.osc-icon-arrow1-left {
  &:before {
    content: $osc-icon-arrow1-left; 
  }
}
.osc-icon-arrow1-right {
  &:before {
    content: $osc-icon-arrow1-right; 
  }
}
.osc-icon-arrow1-up {
  &:before {
    content: $osc-icon-arrow1-up; 
  }
}
.osc-icon-arrow2-down {
  &:before {
    content: $osc-icon-arrow2-down; 
  }
}
.osc-icon-arrow2-left {
  &:before {
    content: $osc-icon-arrow2-left; 
  }
}
.osc-icon-arrow2-right {
  &:before {
    content: $osc-icon-arrow2-right; 
  }
}
.osc-icon-arrow2-up {
  &:before {
    content: $osc-icon-arrow2-up; 
  }
}
.osc-icon-bell-fill {
  &:before {
    content: $osc-icon-bell-fill; 
  }
}
.osc-icon-bell-line {
  &:before {
    content: $osc-icon-bell-line; 
  }
}
.osc-icon-cancel {
  &:before {
    content: $osc-icon-cancel; 
  }
}
.osc-icon-check {
  &:before {
    content: $osc-icon-check; 
  }
}
.osc-icon-complated {
  &:before {
    content: $osc-icon-complated; 
  }
}
.osc-icon-delete {
  &:before {
    content: $osc-icon-delete; 
  }
}
.osc-icon-drawer {
  &:before {
    content: $osc-icon-drawer; 
  }
}
.osc-icon-edit {
  &:before {
    content: $osc-icon-edit; 
  }
}
.osc-icon-error {
  &:before {
    content: $osc-icon-error; 
  }
}
.osc-icon-info {
  &:before {
    content: $osc-icon-info; 
  }
}
.osc-icon-inprogress {
  &:before {
    content: $osc-icon-inprogress; 
  }
}
.osc-icon-logo {
  &:before {
    content: $osc-icon-logo; 
  }
}
.osc-icon-pin-fill {
  &:before {
    content: $osc-icon-pin-fill; 
  }
}
.osc-icon-pin-line {
  &:before {
    content: $osc-icon-pin-line; 
  }
}
.osc-icon-plus {
  &:before {
    content: $osc-icon-plus; 
  }
}
.osc-icon-plusminus {
  &:before {
    content: $osc-icon-plusminus; 
  }
}
.osc-icon-reflash {
  &:before {
    content: $osc-icon-reflash; 
  }
}
.osc-icon-reserved {
  &:before {
    content: $osc-icon-reserved; 
  }
}
.osc-icon-search {
  &:before {
    content: $osc-icon-search; 
  }
}
.osc-icon-systeminfo {
  &:before {
    content: $osc-icon-systeminfo; 
  }
}
.osc-icon-table-next {
  &:before {
    content: $osc-icon-table-next; 
  }
}
.osc-icon-table-prev {
  &:before {
    content: $osc-icon-table-prev; 
  }
}
.osc-icon-user {
  &:before {
    content: $osc-icon-user; 
  }
}
.osc-icon-view-max {
  &:before {
    content: $osc-icon-view-max; 
  }
}
.osc-icon-view-middle {
  &:before {
    content: $osc-icon-view-middle; 
  }
}
.osc-icon-view-minimum {
  &:before {
    content: $osc-icon-view-minimum; 
  }
}
.osc-icon-was {
  &:before {
    content: $osc-icon-was; 
  }
}
.osc-icon-x {
  &:before {
    content: $osc-icon-x; 
  }
}

// OS-SYSTEM-ICON-----------------------------------------------
$imgSRC: 'https://raw.githubusercontent.com/TakHyun-Kang/os-Icon-img/master/img/';

$osIconList: (
  'beos': $imgSRC + 'beOS.png',
  'centos': $imgSRC + 'centos.png',
  'debian': $imgSRC + 'debian.png',
  'fedora': $imgSRC + 'fedora.png',
  'freebsd': $imgSRC + 'freebsd.png',
  'mandriva': $imgSRC + 'mandriva.png',
  'os2': $imgSRC + 'os2.png',
  'redhat': $imgSRC + 'redhat.png',
  'suse': $imgSRC + 'suse.png',
  'symbian': $imgSRC + 'symbian.png',
  'ubuntu': $imgSRC + 'ubuntu.png',
  'unix': $imgSRC + 'unix.png',
  'linux': $imgSRC + 'linux.png',
  'windows': $imgSRC + 'windows.png',
  'android': $imgSRC + 'android.png',
  'ios': $imgSRC + 'ios.png',
  'osx': $imgSRC + 'osx.png',
  'aix': $imgSRC + 'aix.png',
  'aws': $imgSRC + 'aws.png',
);

// OS-icon 함수로 사용
@function os-icon($name) {
  @each $item, $i in $osIconList {
    @if $item == $name {
      @return $i
    }
  }
};

// OS-icon @include로 사용
@mixin os-icon($name) {
  display: inline-block;
  width: 35px;
  height: 35px;
  @each $item, $i in $osIconList {
    @if $name == $item {
      background-image: url($i);
    }
  };
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
};

// OS-icon class로 사용
@each $item, $i in $osIconList {
  &.osc-icon-#{$item} {
    display: inline-block;
    width: 35px;
    height: 35px;
    background-image: url(#{$i});
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
}