@import "core/static/core/colors";
@import "core/static/core/devices";

#news {
  display: flex;
  gap: 1em;

  @media (max-width: 800px) {
    flex-direction: column;
  }

  #news_admin {
    margin-bottom: 1em;
  }

  #right_column {
    flex: 20%;
    margin: 3.2px;
    display: inline-block;
    vertical-align: top;

    @media screen and (min-width: 800px) {
      max-width: 20%;
      min-width: 200px;
    }
  }

  #left_column {
    flex: 79%;
    margin: 0.2em;
  }

  h3 {
    --box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 3px 7px 2px;
    background: lighten($second-color, 5%);
    box-shadow: var(--box-shadow);
    padding: .75rem;
    margin: 0 0 0.5em 0;
    text-transform: uppercase;
    font-size: 17px;
    border-radius: 10px;

    &:not(:first-of-type) {
      margin: 2em 0 1em 0;
    }

    .feed {
      float: right;
      color: #e25512;
    }
  }

  @media screen and (max-width: 800px) {
    #left_column,
    #right_column {
      flex: 100%;
    }
  }

  /* UPCOMING EVENTS */

  #upcoming-events {
    max-height: 600px;
    overflow-y: scroll;
    overflow-x: clip;
    margin-top: 1em;

    #load-more-news-button {
      text-align: center;

      button {
        width: 150px;
      }
    }
  }

  /* LINKS/BIRTHDAYS */
  #links,
  #birthdays {
    display: block;
    width: 100%;
    background: white;
    margin-bottom: 1em;
    font-size: 85%;

    #links_content {
      overflow: auto;
      box-shadow: $shadow-color 1px 1px 1px;
      min-height: 20em;
      padding: 1em;

      h4 {
        margin-left: 5px;
      }

      ul {
        list-style: none;
        margin-left: 0;

        li {
          margin: 10px;

          i {
            width: 25px;
            text-align: center;
            margin-right: .5rem;
          }
        }
      }

    }

    #birthdays_content {
      box-shadow: $shadow-color 1px 1px 1px;
      padding: 1em;

      ul.birthdays_year {
        margin: 0;
        list-style-type: none;
        font-weight: bold;

        > li {
          padding: 0.5em;

          &:nth-child(even) {
            background: $secondary-neutral-light-color;
          }
        }

        ul {
          margin: .5em 0 0 1em;
          list-style-type: square;
          list-style-position: inside;
          font-weight: normal;
        }
      }
    }
  }

  /* END AGENDA/BIRTHDAYS */

  /* EVENTS TODAY AND NEXT FEW DAYS */
  .news_events_group {
    box-shadow: $shadow-color 1px 1px 1px;
    margin-left: 0;
    margin-bottom: 0.5em;

    @media screen and (max-width: $small-devices) {
      margin-left: 3px;
    }

    .news_events_group_date {
      display: table-cell;
      padding: 0.6em;
      vertical-align: middle;
      background: $primary-neutral-dark-color;
      color: $white-color;
      text-transform: uppercase;
      text-align: center;
      font-weight: bold;
      font-family: monospace;
      font-size: 1.4em;
      border-radius: 7px 0 0 7px;

      div {
        margin: 0 auto;

        .day {
          font-size: 1.5em;
        }
      }
    }

    .news_events_group_items {
      display: table-cell;
      width: 100%;

      .news_event:nth-of-type(odd) {
        background: white;
      }

      .news_event:nth-of-type(even) {
        background: $primary-neutral-light-color;
      }

      .news_event {
        display: flex;
        flex-direction: column;
        gap: .5em;
        padding: 1em;

        header {
          img {
            height: 75px;
          }

          .header_content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: .2rem;

            h4 {
              margin-top: 0;
              text-transform: uppercase;
            }
          }
        }
      }
    }
  }

  /* END EVENTS TODAY AND NEXT FEW DAYS */

  .news_empty {
    margin-left: 1em;
  }

  .news_date {
    color: grey;
  }
}