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

$padding: 1.5rem;
$padding_smaller: .5rem;
$gap: .25rem;
$border: .01rem solid black;
$min_col_width: 100px;

.error {
  color: red !important;
}

.radio-btn {
  display: flex;
  flex-direction: row;
  gap: $gap;

  >input,
  >label {
    margin: 0;
  }

  &:hover {
    cursor: pointer;
  }
}

#page #content {
  overflow-x: scroll;
}

.election_table {
  width: inherit;

  >.lists {
    display: flex;
    flex-direction: row;

    >tr {
      display: flex;
      flex-direction: row;
      width: 100%;

      >.column {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        padding: $padding;
        border: $border;
        border-collapse: collapse;
        position: relative;
        min-width: $min_col_width;

        >a {
          width: 20px;
          height: 20px;
          text-align: center;
          padding: 5px;
          border-radius: 25%;
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          right: $gap;
          top: $gap;

          &:hover {
            background-color: #ddd;
          }
        }
      }
    }
  }

  >.role {
    display: flex;
    flex-direction: column;

    >tr {
      display: flex;
      flex-direction: row;
      background-color: lightgrey;

      &:hover {
        background-color: lightgrey;
      }

      >.role_title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        gap: 20px;
        padding: $padding;
        width: 100%;


        >.role_text {
          display: flex;
          width: 100%;
          flex-direction: column;

          >h4 {
            margin: 0;
          }

          .role_description {
            margin-top: .5em;
            text-wrap: auto;
            text-align: left;

            // Show more/less element
            a {
              text-align: center;
              display: block;
            }
          }
        }

        >.role_buttons {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: $gap;

          >button,
          >button>i,
          >a {
            width: 20px;
            height: 20px;
            background-color: #e9e9e9;
            text-align: center;
            padding: 5px;
            border-radius: 25%;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;

            &:hover,
            &:hover>i {
              background-color: #fff;
            }
          }

          >button {
            width: 30px;
            height: 30px;
          }

          >button[disabled] {
            background-color: #eee;
            cursor: not-allowed;

            >i,
            &:hover,
            &:hover>i {
              background-color: #eee;
            }
          }
        }
      }

      >.list_per_role {
        display: flex;
        flex-direction: row;
        justify-content: center;
        border: $border;
        border-collapse: collapse;
        background-color: #fff;
        padding: $padding_smaller;
        margin: 0;
        min-width: $min_col_width;

        >.candidates {
          margin: 0;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
          width: 100%;
          gap: $gap;

          >.candidate {
            display: flex;
            flex-direction: column;
            align-items: center;
            list-style-type: none;
            width: 100%;
            gap: $gap;

            >input[type="radio"]:checked+label,
            >input[type="checkbox"]:checked+label {
              background-color: lightgray;
              border-radius: 10px;

              >figure>.edit_btns>a:hover {
                background-color: #fff;
              }
            }

            >label {
              width: 100%;
            }

            >label>figure,
            >figure {
              position: relative;
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: $gap;
              padding: 10px;
              max-width: 100%;

              >img {
                max-width: 100% !important;
              }

              >figcaption {
                width: 100%;
                max-width: inherit !important;
                overflow: hidden;

                h5 {
                  margin: 0;
                  text-align: center;
                }

                .candidate_program {
                  text-wrap: auto;
                  margin: 5px 0;
                }
              }

              >.edit_btns {
                position: absolute;
                display: flex;
                flex-direction: column;
                top: $gap;
                right: $gap;
                gap: $gap;

                >a {
                  width: 20px;
                  height: 20px;
                  background-color: #e9e9e9;
                  text-align: center;
                  padding: 5px;
                  border-radius: 25%;
                  margin: 0;
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  &:hover {
                    background-color: #d8d8d8;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

#content {

  .election_details {
    margin: .5em 0;
  }

  .buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: $gap;
  }

  .button {
    border: none;
    color: black;
    text-decoration: none;
    background-color: $primary-neutral-light-color;
    padding: 0.4em;
    margin: 0.1em;
    font-size: 1.18em;
    border-radius: 5px;
    box-shadow: #dfdfdf 0 0 1px;
    cursor: pointer;

    &:hover {
      color: black;
      background: #d4d4d4;
    }

    &_send {
      background-color: #59aee2;

      &:hover {
        background-color: rgb(130, 186, 235);
      }
    }
  }
}