/*
  @project: monepi/administrateur
  @create: 8 Oct 2020
  @description: Home styles
*/

/* ----------------------------------------------------------------------------- == SUMMARY */
/*
  1. Home
    1.1. Column
      1.1.1. Tile
        1.1.1.a green
        1.1.1.b blue
        1.1.1.c pink
        1.1.1.d yellow
        1.1.1.e backgroundCentered
        1.1.1.1. Tile-content
          1.1.1.1.a is-hidden
        1.1.1.2. Tile-title
        1.1.1.3. Tile-body
        1.1.1.4. link-forgotPassword
  2. Login
*/

/* ----------------------------------------------------------------------------- == Home */
.Home {
  font-size: 1.09rem;
  margin: 25px auto;
  min-width: auto;
}

.Column {
  display: flex;
  flex-direction: column;
}

.Column:last-child {
  padding-bottom: 0;
}

.Home .Column:first-child .row:first-child {
  flex: 1 0 auto;
}

.Home .Column:first-child .row:first-child .Column:nth-child(2) .Tile:nth-child(1) {
  flex: none;
  justify-content: center;
}

.Home .Column:first-child .row:first-child .Column:nth-child(2) .Tile:nth-child(1) .Tile-content {
  font-family: var(--font-emphase);
  font-size: 1.5rem;
  justify-content: center;
  padding: 23px 0 30px 0;
}

/* ----------------------------------------------------------------------------- == Tile */
.Tile {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--grey-400);
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--white);
  display: flex;
  flex: 1 0 auto;
  margin-bottom: 20px;
  overflow: hidden;
  padding: 10px;
  text-align: center;
}

@media (max-width: 768px) {
  .Tile.image {
    display: none;
  }
}

.Tile.green,
.Tile.pink {
  padding-top: 0;
}

/* ----------------------------------------------------------------------------- == > green */
.Tile.green {
  background-color: var(--green-400);
}

/* ----------------------------------------------------------------------------- == > blue */
.Tile.blue {
  background-color: var(--blue-500);
}

/* ----------------------------------------------------------------------------- == > pink */
.Tile.pink {
  background-color: var(--pink-400);
}

/* ----------------------------------------------------------------------------- == > yellow */
.Tile.yellow {
  background-color: var(--yellow-400);
  flex: none;
}

/* ----------------------------------------------------------------------------- == > backgroundCentered */
.Tile.backgroundCentered {
  background-size: contain;
}

/* ----------------------------------------------------------------------------- == Tile-content */
.Tile-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.Tile-content > *:last-child {
  margin-bottom: 0;
}

.Tile-content.is-hidden {
  display: none;
}

/* ----------------------------------------------------------------------------- == Tile-title */
.Tile-title {
  margin: 20px 0;
}

/* ----------------------------------------------------------------------------- == Tile-body */
.Tile-body {
  flex: 1 0 auto;
  padding: 0 13px;
}

/* ----------------------------------------------------------------------------- == link-forgotPassword */
.link-forgotPassword {
  color: var(--white);
}

/* ----------------------------------------------------------------------------- == Login */
.Login .Form .Form-field {
  border: thin solid var(--grey-400);
}

.Login .Form .Form-field:focus-within {
  box-shadow: 0 0 0 3px #68666033;
}