@use '../../../components/base';
@use '../../../mixins/utils';
@use '../../form/validation/linus' as validation;
@use './variables' as v;


.page nav.front {
  > ul {
    @include utils.wipe-list;
    > li {
      float: left;
      width: 25%;
      > a {
        border: 15px solid white;
        background: #ccc;
        display: block;
        padding: 50px 0;
        text-align: center;
        font-weight: bold;
        text-decoration: none;
        transform: background 0.5s;
        &:hover {
          background: #ddd;
        }
      }
    }
  }
}

.page.error {
  > div {
    padding: v.$global-padding;
  }
}

.page.user-settings {
}

.page.gallery {
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .model {
      width: 19%;
      flex: 0 0 auto;
      padding-bottom: 1%;
      position: relative;
      img {
        display: block;
      }
      time,
      figcaption {
        display: none;
      }
      .controls {
        position: absolute;
        top: 5px;
        right: 5px;
      }
    }
  }
}

.page.errors {
  .collection {
    .model {
      padding: 0;
      flex-direction: column;
      &[data-status^='4'] {
        background: lighten(orange, 30%);
      }
      &[data-status^='5'] {
        background: lighten(red, 30%);
      }
      .info {
        padding: v.$global-padding;
      }
      .summary {
        width: 100%;
        display: flex;

        > * {
          flex: 1 0 0px;
          padding: v.$global-padding;
        }
        > .date-created {
          flex: 0 0 auto;
          width: 170px;
        }
        > .name {
          flex: 0 0 auto;
          width: 150px;
        }
        > .status {
          flex: 0 0 auto;
          width: 60px;
        }
        > .controls {
          padding: 0 5px 0 0;
          width: 45px;
          flex: 0 0 auto;
          display: flex;
          align-items: center;
        }
      }
      pre {
        overflow-x: auto;
      }
      .info {
        display: none;
        &.visible {
          display: block;
        }
      }
    }
  }
}

.page.users {
  .collection {
    article {
      padding: 5px v.$global-padding;
      position: relative;
      cursor: pointer;
      .controls {
        position: absolute;
        top: 12px;
        right: 0;
      }
      > header {
        @include utils.clear;
        > * {
          display: inline-block;
          vertical-align: middle;
        }
        > h1 {
          font-size: rem(16);
          margin: 0;
          padding: 0;
        }
      }
      > ul {
        font-size: rem(12);
        list-style: none;
        line-height: 1.2;
        margin: 0;
        padding: 0;
      }
      > .info {
        display: none;
        &.visible {
          display: block;
        }
      }
      &:nth-child(odd) {
        background: #ddd;
      }
    }
  }
}

.page.content {
  .languages {
    div.hidden {
      display: none;
    }
  }
}

//.page.news-articles {
//	.spytext-field {
//		height: 2000px;
//	}
//}

.login-form {
  width: 100%;
  max-width: 600px;
  margin: 50px auto 0 auto;
  text-align: center;
  padding: 35px 30px 15px 30px;
  border: 1px solid #bbb;

  h1 {
    margin-bottom: 10px;
  }

  a[data-provider],
  button,
  .button {
    width: 100%;
  }

  p.forgot {
    padding-top: 15px;
  }

  .message {
    overflow: hidden;
    margin-bottom: 15px;

    &.error {
      > .container {
        padding: 15px 5px;
        border-radius: 5px;
        border: 1px solid lighten(base.$base-color, 20%);
        background: lighten(base.$base-color, 50%);
        color: base.$base-color;
        font-size: rem(20);
        text-align: center;
        min-height: 36px;
        .heading {
          font-weight: bold;
        }
      }
    }
    &.animate {
      transition: all 0.5s;
    }
    &.enter:not(.active),
    &.leave.active {
      height: 0 !important;
      margin-bottom: 0;
    }
  }
}

.register-form {
  width: 100%;
  max-width: 600px;
  margin: 50px auto 0 auto;
  text-align: center;
  padding: 35px 30px 15px 30px;
  border: 1px solid #bbb;

  h1 {
    margin-bottom: 10px;
  }

  a[data-provider],
  button,
  .button {
    width: 100%;
  }

  p.forgot {
    padding-top: 15px;
  }

  .message {
    overflow: hidden;
    margin-bottom: 15px;

    &.error {
      padding: 15px 5px;
      border-radius: 5px;
      border: 1px solid lighten(validation.$form-invalid-color, 20%);
      background: lighten(validation.$form-invalid-color, 50%);
      color: validation.$form-invalid-color;
      font-size: rem(20);
      text-align: center;
      min-height: 36px;
      .heading {
        font-weight: bold;
      }
    }
    &.animate {
      transition: all 0.5s;
    }
    &.enter:not(.active),
    &.leave.active {
      height: 0 !important;
      margin-bottom: 0;
    }
  }
}