@import '../styles/_colors.scss';

$counter_size:13px;

.vui-button{
  display:inline-flex;
  justify-content: center;
  box-sizing:border-box;
  position: relative;
  cursor:pointer;
  border:1px solid transparent;
  background:transparent;
  letter-spacing:.5px;
  font-size:14px;
  font-weight:bold;
  line-height:1.35;
  font-family:inherit;
  user-select:none;
  outline:none;
  outline-offset:0;
  white-space:normal;
  text-decoration: none;
  align-items: center;
  min-height: 31px;

  padding:6px 12px;
  color:base-color(primary-white);
  background-color:base-color(sea-blue);

  > svg, > img{
    max-width:20px;
    height:18px;
    padding-right: 8px;
    .icon-color-primary-fill{
      fill:base-color(primary-white);
    }
    .icon-color-primary-stroke{
      stroke:base-color(primary-white);
    }
    &:last-child{
      padding: 0;
    }
  }

  &:hover:not(:disabled){
    background-color:base-color(sea-blue-light);
    text-decoration: none;
  }
  &:focus:not(:disabled){
    background-color:base-color(sea-blue-dark);
    box-shadow:0 0 8px 1px base-color(sky-blue);
    text-decoration: none;
  }
  &:active:not(:disabled), &.vui-button--active:not(:disabled){
    background-color:base-color(sea-blue-darkest);
    box-shadow:0 0 8px 1px base-color(sky-blue);
    text-decoration: none;
  }

  &[data-type='secondary']:not(:disabled){
    color:base-color(sea-blue-light);
    background-color:base-color(sky-blue);
    
    > svg{
      .icon-color-primary-fill{
        fill:base-color(sea-blue-light);
      }
      .icon-color-primary-stroke{
        stroke:base-color(sea-blue-light);
      }
    }

    &:hover{
      background-color:base-color(sky-blue-light);
    }
    &:focus{
      background-color:base-color(cyan-lightest);
      box-shadow:0 0 8px 1px base-color(sky-blue);
    }
    &:active, &.vui-button--active{
      color:base-color(sea-blue);
      background-color:base-color(cyan-light);
      box-shadow:0 0 8px 1px base-color(sky-blue);

      > svg{
        .icon-color-primary-fill{
          fill:base-color(sea-blue);
        }
        .icon-color-primary-stroke{
          stroke:base-color(sea-blue);
        }
      }
    }
  }
  &[data-type='subtle']:not(:disabled){
    color:base-color(sea-blue);
    background-color:base-color(primary-white);
    border-color:base-color(sky-blue);
    
    > svg{
      .icon-color-primary-fill{
        fill:base-color(sea-blue);
      }
      .icon-color-primary-stroke{
        stroke:base-color(sea-blue);
      }
    }

    &:hover{
      background-color:base-color(sky-blue-lightest);
    }
    &:focus{
      background-color:base-color(sky-blue-lightest);
      box-shadow:0 0 8px 1px base-color(sky-blue);
    }
    &:active, &.vui-button--active{
      background-color:base-color(sky-blue-light);
      box-shadow:0 0 8px 1px base-color(sky-blue);
    }
  }
  &[data-type='finish']:not(:disabled){
    color:base-color(primary-white);
    background-color:base-color(land-green);
    
    > svg{
      .icon-color-primary-fill{
        fill:base-color(primary-white);
      }
      .icon-color-primary-stroke{
        stroke:base-color(primary-white);
      }
    }

    &:hover{
      background-color:base-color(land-green-light);
    }
    &:focus{
      background-color:base-color(land-green-dark);
      box-shadow:0 0 8px 1px base-color(sky-blue);
    }
    &:active, &.vui-button--active{
      background-color:base-color(land-green-darkest);
      box-shadow:0 0 8px 1px base-color(sky-blue);
    }
  }
  &[data-type='danger']:not(:disabled){
    color:base-color(primary-white);
    background-color:base-color(red);
    
    > svg{
      .icon-color-primary-fill{
        fill:base-color(primary-white);
      }
      .icon-color-primary-stroke{
        stroke:base-color(primary-white);
      }
    }

    &:hover{
      background-color:base-color(red-light);
    }
    &:focus{
      background-color:base-color(red-dark);
      box-shadow:0 0 8px 1px base-color(sky-blue);
    }
    &:active, &.vui-button--active{
      background-color:base-color(red-darkest);
      box-shadow:0 0 8px 1px base-color(sky-blue);
    }
  }
  &[data-type='transparent']:not(:disabled){
    background-color: transparent;
    color: inherit;
    padding: 4px 10px;
    border: 0;
    
    > svg{
      max-width: 26px;
      height: 21px;
      .icon-color-primary-fill{
        fill:base-color(dark-blue);
      }
      .icon-color-primary-stroke{
        stroke:base-color(dark-blue);
      }
    }

    &:hover, &:focus, &:active, &.vui-button--active{
      background-color: transparent;
      box-shadow: none;
      padding-bottom: 1px;
      border-bottom: {
        style: solid;
        color: base-color(sky-blue);
        width: 3px;
      }
    }
  }

  &[data-size='large']{
    padding:6px 20px;
    font-size:20px;
    min-height: 45px;
    > svg, > img{
      max-width:34px;
      height:31px;
    }
    &[data-type='transparent']:focus, &[data-type='transparent']:active{
      padding-bottom: 4px;
    }
  }
  &[data-size='small']{
    padding:4px 8px;
    line-height:1.5;
    > svg, > img{
      max-width:18px;
      height:16px;
    }
    &[data-type='transparent']:focus, &[data-type='transparent']:active{
      padding-bottom: 2px;
    }
  }
  &[data-size='xsmall']{
    padding:2px 4px;
    font-size:12px;
    line-height:1.2;
    min-height: 20px;
    > svg, > img{
      max-width:16px;
      height:12px;
    }
    &[data-type='transparent']:focus, &[data-type='transparent']:active{
      border-bottom-width: 2px;
      padding-bottom: 1px;
    }
  }

  &[data-count]{
    &::after{
      content: attr(data-count);
      box-sizing: border-box;
      position: absolute;
      border-radius: $counter_size;
      height: $counter_size;
      font-size: 10px;
      text-align: center;
      background-color: base-color(cyan);
      color: base-color(primary-white);
      padding: 1px 3px 3px 4px;
      right: 3px;
      top: 3px;
      line-height: 1;
    }
    &[data-size='xsmall']::after{
      display: none;
    }
  }

  &:disabled{
    cursor:default;
    pointer-events:none;
    background-color:base-color(neutral-20);
    color:base-color(neutral-60);
    &[data-count]::after{
      background-color:base-color(primary-white);
      color:base-color(neutral-40);
    }

    &[data-type='subtle'], &[data-type='transparent']{
      background-color:base-color(primary-white);
      color:base-color(neutral-40);
      border-color:base-color(neutral-40);
      &[data-count]::after{
        background-color:base-color(neutral-20);
        color:base-color(neutral-60);
      }

      > svg {
        .icon-color-primary-fill{
          fill:base-color(neutral-40);
        }
        .icon-color-primary-stroke{
          stroke:rbase-color(neutral-40);
        }
      }
    }
    &[data-type='transparent']{
      border-color: transparent;
    }
  }
}