/* You can add global styles to this file, and also import other style files */
:root {
  --primary: #fff;
  --primary-text: #444444;
  --primary-border: #ccc;
  --primary-hover: #eee;
  --secondary: #eee;
  --secondary-hover: #c9c9c9;
  --secondary-border: #bbb;

  --disabled: #eee;
  --disabled-text: #aaa;

  --transparent: rgba(0,0,0, 0);

  --shadow-1: rgba(0, 0, 0, 0.2);
  --shadow-2: rgba(0, 0, 0, 0.14);
  --shadow-3: rgba(0, 0, 0, 0.12);
  --shadow-hover: #777;

  --alert: #eb1d3f;
  --alert-text: #fff;
  --alert-hover: #c20d2b;
  --alert-border: #b91b35;

  --selection: #185eb4;
}

html {
  height: 100%;
}

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  padding-top: 3.2rem;
  background-color: var(--primary);
}

.shadowed {
  box-shadow: 0px 2px 1px -1px var(--shadow-1),
              0px 1px 1px 0px var(--shadow-2),
              0px 1px 3px 0px var(--shadow-3);
  transition: box-shadow .2s ease-out;

  &:hover {
    box-shadow: 0 .2em .5em var(--shadow-hover);
  }
}

a.no-style {
  color: inherit;
  text-decoration: none;
}

button {
  border-style: solid;
  border-width: .1rem;
  border-color: var(--transparent);
  border-radius: .2rem;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: .5rem;
  background-color: var(--transparent);
  color: var(--primary-text);

  transition: background-color .2s ease-out,
              border-color .2s ease-out;

  &:hover {
      background-color: var(--primary-hover);
      border-color: var(--primary-border);
  }

  &:disabled {
    background-color: var(--disabled);
    color: var(--disabled-text);
    cursor: not-allowed;
  }

  &.icon {
      width: 2rem;
      height: 2rem;
      min-width: 1rem;
      min-height: 1rem;
      padding: 0;
  }

  &.raised {
    background-color: var(--primary); //#4a4a4a;
    box-shadow: 0px 2px 1px -1px var(--shadow-1),
              0px 1px 1px 0px var(--shadow-2),
              0px 1px 3px 0px var(--shadow-3);
  }

  &.stroked {
    border-color: var(--primary-border);

    &.primary {
      background-color: var(--primary);

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

    &.secondary {
      background-color: var(--secondary);

      &:hover {
        background-color: var(--secondary-hover)
      }
    }
  }

  &.alert {
    background-color: var(--alert);
    color: var(--alert-text);

    &:hover {
      background-color: var(--alert-hover);
      border-color: var(--alert-border);
    }
  }
}

.dialog-actions {
  margin-top: 1rem; 
  display: flex;
  justify-content: space-between;

  > * {
      flex: 1 1 45%;
      max-width: 45%;
  }
}