frontend/src/stylesheets/random-item.scss

@import "variables";
@import "globals";

.section-heading,
.section-subheading {
  padding-top: 2em;
}
// TODO: Refactor
.section-title {
  line-height: 0.5;
  text-align: center;
}

// the bottom section
h3.section-title {
  padding-top: 1em;
}

// --------------------------
//        add horizontal lines around the section title.
//----------------------------
.section-title span:before,
.section-title span:after {
  content: "";
  position: absolute;
  height: 8px;
  border-bottom: 1.7px solid black;
  top: 0;
  width: 400px;
}

.section-title span:before {
  right: 100%;
  margin-right: 10px;
}

.section-title span:after {
  left: 100%;
  margin-left: 10px;
}

// Topics
.random-topics {
  margin-top: .5em;
}

.random-section-title {
  bottom: -3px;

}
// TODO: Refactor
// buttons
.random-item-container {
  button {
    background: white;
  }
  // view all and shuffle button
  .view-items-link {
    justify-self: left;
    bottom: 36px;
    position: relative;
    padding: 0px;
  }
  .view-all-items {
    left: 0;
    //position: absolute;
    justify-self: left;
    padding: .9em 0px;
    padding-right: 5px;
  }
  // shuffle
  .shuffle-button {
    justify-self: right;
    bottom: 36px;
    position: relative;
    padding: 10px;
    padding-right: 0px;
  }
}

// fonts
.shuffle-button, .view-all-items {
  span.arabic-text {
    font-size: 18px;
  }
  span.english-text {
    font-size: 16px;
  }
}

.buttons-grid {
  height: 8px;
}

span.english-text.bold-english-text{
  font-size: 28px;
}
span.arabic-text.bold-arabic-text{
  font-size: 28px;
}

// highlighted text
.highlighted-text:hover{
  background: black;
  color:white;
  position: relative;
}
//.navbar-link-overlay {
//  width: calc(100% + 6px);
//  height: calc(100% - 3px - 2px);
//  position: absolute;
//  top: 3px;
//  left: 0px;
//  z-index: -1;
//}
//.navbar-link-neonblue:hover .navbar-link-overlay{
//  background: black;
//}