@import "../../node_modules/normalize-scss/sass/normalize/import-now";
@import url('https://fonts.googleapis.com/css?family=Muli:300,400,600');

body {
  font-family: "Muli";
  font-weight: 300;
  font-size: $font-size;
  letter-spacing: 1px;
  line-height: 1.7;
}

.app {
  padding: $size-unit * 2;
  opacity: 0;

  &[data-theme="dark"] {
    opacity: 1;
    background: $color-primary-dark;
    color: $color-secondary-dark;
  }

  &[data-theme="light"] {
    opacity: 1;
    background: $color-primary-light;
    color: $color-secondary-light;
  }
}


* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-size: $font-size;
  font-weight: 300;
  margin-bottom: $size-unit;
}

button {
  font-size: 80%;
  background: none;
  border: none;
  padding: $size-unit * 0.75 $size-unit;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 250ms ease;

  [data-theme="dark"] & {
    color: $color-secondary-dark;
  }

  [data-theme="light"] & {
    color: $color-secondary-light;
  }

}

ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

a, a:active, a:visited {
  text-decoration: none;
  font-weight: 300;
  cursor: pointer;

  [data-theme="dark"] & {
    color: $color-secondary-dark;
  }

  [data-theme="light"] & {
    color: $color-secondary-light;
  }
}

.button-group {

  section:hover & {
    a.remove:hover { color: $color-danger; }
  }

  a, a:visited, a:active {
    background: none;
    display: table-cell;
    padding: $size-unit/2 $size-unit/2;
    font-size: $font-size-small;
    letter-spacing: 1px;
    border: 1px solid;
    border-width: 1px 1px 1px 0;

    [data-theme="dark"] & {
      color: $color-secondary-dark;
    }

    [data-theme="light"] & {
      color: $color-secondary-light;
    }

    &:nth-child(1) { margin-left: 0; }
  }

  a:first-child {
    border-radius: 2px 0 0 2px;
    border-left-width: 1px;
  }

  a:last-child  {
    border-left: none;
    border-radius: 0 2px 2px 0;
  }
}
