/* This file is for your main application css. */
@import "colors";
@import "force_layout";
@import "initial_interface";

// https://fonts.google.com/specimen/Fira+Mono
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Fira Mono Regular'), local('FiraMono-Regular'), url(/fonts/fira_mono/FiraMono-Regular.ttf) format('truetype');
}

// https://fonts.google.com/specimen/Fira+Sans
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(/fonts/fira_sans/FiraSans-Regular.ttf) format('truetype');
}

// Semi-bold
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Fira Sans SemiBold'), local('FiraSans-SemiBold'), url(/fonts/fira_sans/FiraSans-SemiBold.ttf) format('truetype');
}

// italic
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Fira Sans Italic'), local('FiraSans-Italic'), url(/fonts/fira_sans/FiraSans-Italic.ttf) format('truetype');
}

body {
  margin: 0;
  font-family: 'Fira Sans', sans-serif;
}

body .monospace {
  font-family: 'Fira Mono', monospace;
}

body.initial {
  background: #eee;
}

nav {
  display: flex;
  justify-content: space-between;
  background: $ui-purple;
  color: white;
  padding: 12px;
  padding-left: 20px;

  h1 {
    margin: 0;
    font-size: 1.2em;
  }

  a {
    color: white;
    &:hover { color: white }
  }

  .logo {
    max-width: 40px;
    max-height: 40px;
    margin-right: 10px;
  }
}

main.container {
  padding-top: 12px;
}

nav > ul {
  margin: 0;
}

/* LiveView specific classes for your customizations */
.phx-no-feedback.invalid-feedback,
.phx-no-feedback .invalid-feedback {
  display: none;
}

.phx-click-loading {
  opacity: 0.5;
  transition: opacity 1s ease-out;
}

.phx-loading{
  cursor: wait;
}
.phx-loading *{
  pointer-events: none;
}

.phx-modal {
  opacity: 1!important;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.phx-modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.phx-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.phx-modal-close:hover,
.phx-modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


/* Alerts and form errors */
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert p {
  margin-bottom: 0;
}
.alert:empty {
  display: none;
}
.invalid-feedback {
  color: #a94442;
  display: block;
  margin: -1rem 0 2rem;
}

nav li {
  margin: 0 4px;
  a {
    font-size: 0.8rem;
  }
}

div.rule {
  border-bottom: 2px solid $ui-purple;
  opacity: 50%;
  width: 100%;
}

// Utility css
.compile-red { color: $compile-red; }
.ui-purple { color: $ui-purple; }

.display-none { display: none; }
.display-inline { display: inline; }
.display-inline-block { display: inline-block; }

.flex { display: flex; }
.flex-align-center { align-items: center; }

.list-style-none { list-style: none; }
.p-4 { padding: 12px; }
.p-r-0 { padding-right: 0; }
.p-l-0 { padding-left: 0; }
.m-2 { margin: 6px; }
.m-l-4 { margin-left: 12px; }
.m-r-2 { margin-right: 6px; }
.m-r-4 { margin-right: 12px; }
.m-b-2 { margin-bottom: 6px; }
.m-b-4 { margin-bottom: 12px; }
.m-b-6 { margin-bottom: 18px; }
.m-t-2 { margin-top: 6px; }
.m-t-4 { margin-top: 12px; }

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

.hover-bold:hover { font-weight: 600; }
.bold { font-weight: 600; }
.italic { font-style: italic; }

.text-large { font-size: 16px; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }

.pre { white-space: pre; }
